/*
Theme Name: Elevare by Retinue
Theme URI: https://elevarebyretinue.com
Author: Retinue Advisory
Description: Custom hand-coded classic theme for Elevare, the people-development practice of Retinue Advisory. No page builder, no framework, no build tooling. Design tokens, self-hosted Poppins, the site-wide header with a Services dropdown over a virtual /services/ base, the navy footer, the shared component kit (section bands, three-dot device, connected panel, wave diagram, navy result box, CTA band), a branded 404, and a full three-tier responsive implementation.
Version: 0.3.2
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: All rights reserved
Text Domain: elevare
*/
/* NOTE: "Requires PHP" is deliberately 7.4 — the live server runs 7.4 and the
theme's code is 7.4-compatible (no PHP 8.x-only syntax). The move to 8.3
happens later, alongside Retinue; only then does this header change. */
/* =============================================================
1. FONTS · self-hosted Poppins (woff2, latin)
-------------------------------------------------------------
Four weights, matching exactly what the wireframes load, so the
built site reproduces their rendering (decision D9). Google Fonts
is NOT loaded at runtime — the wireframes' is a wireframe
convenience only.
============================================================= */
@font-face{
font-family:'Poppins';
font-style:normal;
font-weight:400;
font-display:swap;
src:url(assets/fonts/poppins-400.woff2) format('woff2');
}
@font-face{
font-family:'Poppins';
font-style:normal;
font-weight:500;
font-display:swap;
src:url(assets/fonts/poppins-500.woff2) format('woff2');
}
@font-face{
font-family:'Poppins';
font-style:normal;
font-weight:600;
font-display:swap;
src:url(assets/fonts/poppins-600.woff2) format('woff2');
}
@font-face{
font-family:'Poppins';
font-style:normal;
font-weight:700;
font-display:swap;
src:url(assets/fonts/poppins-700.woff2) format('woff2');
}
/* =============================================================
2. DESIGN TOKENS · Content Document §2, verbatim
-------------------------------------------------------------
Gold is for kickers, dots, rules and accents — NEVER buttons.
Every call to action is navy background, white text.
============================================================= */
:root{
--navy:#062C51; /* headings, CTAs, footer, primary accents */
--gold:#C39547; /* kickers, dots, rules, accents */
--gold-mid:#C59D55; /* secondary accent */
--gold-light:#DDC69A; /* secondary accents, card borders */
--ink:#1A1A1A; /* body text */
--white:#FFFFFF;
--tint:#F7F4EE; /* alternating section background */
--line:#E7E1D6; /* hairlines */
--body:#33404D; /* body copy inside sections */
--body-soft:#4A5A68; /* hero lead copy */
--body-deep:#26313d; /* long-form paragraph copy */
--wrap:1240px; /* outer container */
--wrap-pad:40px; /* side padding, steps down responsively */
--content:1160px; /* content width inside sections */
}
/* =============================================================
3. GLOBAL BASE
============================================================= */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
font-family:'Poppins','Helvetica Neue',Arial,sans-serif;
color:var(--ink);
background:var(--white);
line-height:1.6;
/* Belt and braces against mobile horizontal scroll: no page should ever
need this, but a single stray wide element must not break the layout. */
overflow-x:hidden;
}
h1,h2,h3,h4{
font-family:'Poppins','Helvetica Neue',Arial,sans-serif;
font-weight:600;
color:var(--navy);
}
img{max-width:100%;display:block}
a{color:var(--navy);text-decoration:none}
/* Visible keyboard focus everywhere — the theme ships no focus-killing resets. */
a:focus-visible,button:focus-visible{
outline:2px solid var(--gold);
outline-offset:3px;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--wrap-pad)}
/* Skip link — visually hidden until focused. */
.skip-link{
position:absolute;left:-9999px;top:0;z-index:100;
background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 4px 0;
}
.skip-link:focus{left:0}
/* =============================================================
4. SECTION-HEAD KIT · kicker, three-dot device, headings
============================================================= */
.kicker{
color:var(--gold);
text-transform:uppercase;
letter-spacing:2px;
font-size:18px;
font-weight:600;
margin-bottom:10px;
}
/* The three-dot device: navy, navy, gold — beneath every kicker. */
.dots{display:flex;gap:8px;margin-left:2px}
.dots span{width:8px;height:8px;border-radius:50%;background:var(--navy)}
.dots span:nth-child(3){background:var(--gold)}
/* Reversed variant (gold, navy, navy) — About Us "What the Name Means". */
.dots.reversed span{background:var(--navy)}
.dots.reversed span:nth-child(1){background:var(--gold)}
.dots.reversed span:nth-child(3){background:var(--navy)}
.dots.centred{justify-content:center;margin:14px 0 18px}
.section-head{max-width:680px;margin-bottom:40px}
.section-head.centred{margin-left:auto;margin-right:auto;text-align:center}
.section-head.centred .kicker{display:flex;justify-content:center}
.section-head h2{font-size:34px}
/* Pages whose lead heading IS the page heading render it as
so every page
carries exactly one — visually identical, correct document outline. */
.section-head h1{font-size:34px}
/* One lead heading per page may run larger: About Us "The Elevare Story". */
.section-head.lead h1{font-size:40px}
.section-head p{margin-top:14px;color:var(--body);font-size:18px}
/* A short emphasised line closing a section intro — e.g. Home's
"Here's what makes that possible." beneath the Difference paragraph. */
.section-head p.note{font-weight:700;color:var(--navy);margin-top:8px}
/* =============================================================
5. SECTION BANDS · alternate tint / white down every page
============================================================= */
section{padding:64px 0}
section.tint{background:var(--tint)}
/* =============================================================
6. HEADER · white bar, logo left, nav + Contact button right
-------------------------------------------------------------
The Services item is a dropdown LABEL, not a link — there is no
/services/ page. On desktop it opens on hover and keyboard focus;
below 1024px the whole bar collapses to a hamburger and Services
becomes a tap-to-expand accordion (no hover on touch).
============================================================= */
.site-header{border-bottom:1px solid var(--line);background:var(--white)}
.nav-in{
min-height:104px;
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:14px 24px;
padding:14px var(--wrap-pad);
position:relative;
}
/* Negative margin trims the lockup's own internal whitespace so its left edge
sits flush with the page's text column. */
.nav-brand{display:inline-block;margin-left:-21px;line-height:0}
.nav-logo{height:110px;width:auto;object-fit:contain;display:block}
.nav-r{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:flex-end}
.nav-r a,.nav-r span{font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap}
.nav-r a:hover{color:var(--navy)}
.nav-r a.active{color:var(--navy);font-weight:600}
.nav-r a.contact{
background:var(--navy);color:#fff;
padding:9px 20px;border-radius:4px;font-weight:600;
}
.nav-r a.contact:hover{background:#04203c;color:#fff}
/* --- Services dropdown --- */
.nav-services{position:relative}
.nav-services > .nav-services-label{
font-size:14px;font-weight:500;color:var(--ink);
background:none;border:0;padding:0;cursor:pointer;
font-family:inherit;white-space:nowrap;
display:inline-flex;align-items:center;gap:5px;
}
.nav-services > .nav-services-label:hover,
.nav-services.is-current > .nav-services-label{color:var(--navy)}
.nav-services.is-current > .nav-services-label{font-weight:600}
.nav-services > .nav-services-label::after{content:"\25BE";font-size:10px;color:var(--gold)}
.nav-services .dd{
display:none;position:absolute;top:100%;right:0;margin-top:16px;
background:var(--white);border:1px solid var(--line);border-radius:6px;
box-shadow:0 12px 30px rgba(6,44,81,.12);
min-width:280px;padding:8px 0;z-index:10;
}
.nav-services:hover .dd,
.nav-services:focus-within .dd{display:block}
.nav-services .dd a{
display:block;padding:11px 20px;font-size:13.5px;
color:var(--ink);white-space:normal;
}
.nav-services .dd a:hover,
.nav-services .dd a:focus{background:var(--tint);color:var(--navy)}
.nav-services .dd a.active{color:var(--navy);font-weight:600}
/* --- Hamburger (hidden on desktop) --- */
.nav-toggle{
display:none;
border:1px solid var(--line);background:var(--white);
border-radius:4px;padding:9px 11px;cursor:pointer;
}
.nav-toggle .bar{display:block;width:22px;height:2px;background:var(--navy);margin:4px 0}
/* =============================================================
7. HERO · contained card on tint, copy left / photo right
-------------------------------------------------------------
The photo column matches the text column's height via height:100%
on the grid item (the robust mechanism — NOT a fixed margin-top
nudge). Once the columns stack, that is released (see §14).
============================================================= */
.hero{padding:70px 0 80px;background:var(--tint)}
.hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:start}
.hero h1{font-size:42px;line-height:1.2}
.hero-copy p.lead{font-size:18px;color:var(--body-soft);max-width:560px;margin-top:10px}
.hero-copy p.lead + p.lead{margin-top:16px}
.hero-media{height:100%;min-height:0}
.hero-photo{
height:100%;min-height:0;width:100%;
object-fit:cover;border-radius:14px;
box-shadow:0 30px 70px rgba(6,44,81,.22);
}
/* Inner-page hero: 34px against Home's 42px. */
.hero.inner h1{font-size:34px;line-height:1.25}
/* =============================================================
8. CONNECTED PANEL · one bordered panel, partial-height
dividers, no individual card borders
-------------------------------------------------------------
Reused on Home (100px icons), Designing Learning Programs
(140px) and Contact (56px) — the size is set per page.
============================================================= */
.info-panel{
display:grid;grid-template-columns:repeat(3,1fr);
background:var(--white);border:1px solid var(--line);
border-radius:10px;overflow:hidden;
}
.info-seg{padding:36px 30px 54px;text-align:center;position:relative}
.info-seg:not(:last-child)::after{
content:"";position:absolute;right:0;top:20%;bottom:20%;
width:1px;background:var(--line);
}
.info-icon{width:100px;height:100px;margin:0 auto 10px}
.info-icon img{width:100%;height:100%;object-fit:contain}
/* Fixed-height heading row so one- and two-line titles align and the gold rule
beneath each sits level across all three segments. */
.info-seg-head{
min-height:70px;display:flex;align-items:center;justify-content:center;
border-bottom:1.5px solid var(--gold);
padding-bottom:14px;margin-bottom:16px;
}
.info-seg h3{font-size:20px;line-height:1.3;margin:0}
.info-seg p{font-size:16px;color:var(--body);line-height:1.55}
.info-arrow{
position:absolute;right:26px;bottom:20px;
color:var(--gold);font-size:20px;display:inline-block;
transition:transform .15s;
}
.info-arrow:hover{transform:translateX(4px);color:var(--navy)}
/* =============================================================
9. WAVE DIAGRAM · Home, "The Elevare Difference"
-------------------------------------------------------------
Five nodes threaded through a continuous gold wave. The SVG is
drawn in a 1160x460 coordinate space; the node LABELS are HTML
positioned as PERCENTAGES of that same space, so text and curve
scale together. (The wireframe positioned them in absolute px,
which detached the labels from the nodes below 1160px.)
Below 1024px the wave is retired and the same markup reflows to
a vertical stack — one DOM, no duplicated content.
============================================================= */
.journey-wrap{position:relative;margin-top:-30px}
.journey-svg{display:block;width:100%;height:auto}
.journey-text{
position:absolute;
width:16.4%; /* 190/1160 — the wireframe's label width */
transform:translateX(-50%);
}
.journey-text.above{transform:translate(-50%,-100%)}
.j-num{color:var(--gold);font-weight:700;font-size:15px;letter-spacing:1px;margin-bottom:4px;text-align:center}
.j-heading{color:var(--navy);font-weight:700;font-size:16px;margin-bottom:6px;line-height:1.25;text-align:center}
.j-desc{color:var(--body);font-size:16px;line-height:1.5;text-align:center}
/* =============================================================
10. NAVY RESULT BOX
============================================================= */
.result-box{
background:var(--navy);border-radius:12px;
padding:28px 48px;max-width:720px;margin:36px auto 0;text-align:center;
}
.result-kicker{
color:var(--gold);text-transform:uppercase;letter-spacing:2px;
font-size:14px;font-weight:700;margin-bottom:8px;
}
.result-box p{color:#EAF2FB;font-size:18px;line-height:1.65;margin:0}
/* Key words picked out in plain-weight gold — no bold, no italic. */
.gold-em{color:var(--gold);font-style:normal;font-weight:400}
/* =============================================================
11. BUTTONS · navy only. Gold is never a button.
============================================================= */
.btn{
display:inline-block;background:var(--navy);color:#fff;
font-weight:600;padding:13px 30px;border-radius:4px;
flex-shrink:0;text-align:center;
}
.btn:hover{background:#04203c;color:#fff}
/* =============================================================
12. CLOSING CTA BAND
-------------------------------------------------------------
Heading + body left, navy button right. The button aligns to the
TOP OF THE BODY TEXT (offset ≈ the heading's rendered height),
not vertically centred against the whole block.
============================================================= */
.cta-band{padding:44px 0;border-top:1px solid var(--line)}
.cta-band.tint{background:var(--tint);border-top:0}
.cta-row{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta-band h2{color:var(--navy);font-size:26px}
.cta-band p{color:var(--body);margin:10px 0 0;font-size:18px;max-width:820px}
.cta-band .btn{margin-top:40px}
/* =============================================================
13. FOOTER · navy band, reversed lockup, upward dropdown
============================================================= */
.site-footer{background:var(--navy);color:#DCE6EF}
.foot-in{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:15px var(--wrap-pad) 11px}
.foot-brand{display:inline-block;line-height:0}
.foot-logo{height:66px;width:auto;object-fit:contain}
.foot-tag{
font-size:14px;color:#DCE6EF;
border-left:1px solid rgba(255,255,255,.25);padding-left:22px;
}
.foot-r{margin-left:auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.foot-r a{color:#DCE6EF;font-size:13.5px;white-space:nowrap}
.foot-r a:hover{color:#fff}
/* The footer's Services dropdown opens UPWARD — a downward panel would render
off-screen at the bottom of the viewport. Applied once, at component level. */
.foot-services > .nav-services-label{color:#DCE6EF}
.foot-services > .nav-services-label:hover{color:#fff}
.foot-services .dd{
top:auto;bottom:100%;margin-top:0;margin-bottom:16px;
background:var(--white);
}
.foot-services .dd a{color:var(--ink)}
.foot-services .dd a:hover{background:var(--tint);color:var(--navy)}
/* Privacy is a plain link here, not a bordered pill (differs from Retinue). */
.foot-privacy{color:#DCE6EF}
.fcwrap{
position:relative;display:flex;justify-content:flex-end;align-items:center;
padding:8px var(--wrap-pad) 12px;
font-size:12.5px;color:#9FB3C6;gap:20px;flex-wrap:wrap;
}
.fcwrap .copy-text{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
.foot-social{display:flex;gap:10px}
.foot-social a{
width:34px;height:34px;background:var(--white);border-radius:8px;
display:flex;align-items:center;justify-content:center;
}
.foot-social svg{width:16px;height:16px;fill:var(--navy)}
/* =============================================================
13a. TEXT + PHOTO ROW · About Us Story and Founder Led
-------------------------------------------------------------
Text left, photo right, top-aligned. The photo is capped at a
fixed height and cropped with object-fit, so a portrait and a
landscape source both sit in the same frame.
============================================================= */
/* Optical top alignment against the photo beside it.
The text column's BOX is already flush with the image's top edge, but a line
box is taller than its glyphs, so the type reads as sitting ~2.5px low. This
nudge aligns what the eye actually sees, not what the box model says. */
.copy-col{margin-top:-3px}
.story-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:start}
.story-grid p{font-size:18px;color:var(--body-deep);line-height:1.7}
.story-grid p + p{margin-top:16px}
.story-grid .more-link{margin-top:16px}
.story-grid .more-link a{font-weight:600;color:var(--navy);font-size:18px}
.story-photo-wrap{height:340px;align-self:start}
.story-photo-wrap img{width:100%;height:100%;object-fit:cover;border-radius:14px;display:block}
/* =============================================================
13b. NAME-MEANS BOX · the gold-bordered callout
-------------------------------------------------------------
About Us "What the Name Means", reused directly on Contact's
closing callout. Full gold border (not gold-light) at 1.5px,
14px radius, on a tint band.
============================================================= */
.name-means-box{
max-width:var(--content);margin:0 auto;
padding:48px 64px;
background:var(--white);
border:1.5px solid var(--gold);
border-radius:14px;
box-shadow:0 20px 50px rgba(6,44,81,.06);
}
/* Contact's variant: narrower, centred, with a heading instead of a kicker. */
.name-means-box.compact{max-width:900px;padding:44px 56px;text-align:center}
.name-means-box.compact h3{font-size:22px;color:var(--navy);font-weight:700;margin-bottom:14px}
.name-means-box.compact p{font-size:18px;color:var(--body);line-height:1.6}
/* The kicker here is 14px — a one-off exception; every other kicker is 18px. */
.name-means-box .kicker{text-align:center;font-size:14px;display:block}
.name-means-statement{max-width:1000px;margin:22px auto 0;text-align:center}
.name-means-statement p{
font-size:25px;font-weight:500;font-style:italic;
line-height:1.55;color:var(--navy);
}
/* The couplet, flanked by the dot device — reversed on the right so the pair
frames the line symmetrically rather than pointing the same way twice. */
.name-means-tagline{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:28px}
.name-means-tagline p{font-size:18px;font-weight:600;color:var(--navy);margin:0}
.tagline-dots{display:flex;gap:6px;flex-shrink:0}
.tagline-dots span{width:6px;height:6px;border-radius:50%;background:var(--navy)}
.tagline-dots span:nth-child(3){background:var(--gold)}
.tagline-dots.reversed span:nth-child(1){background:var(--gold)}
.tagline-dots.reversed span:nth-child(3){background:var(--navy)}
/* =============================================================
13c. TWO-DOORS GRAPHIC · About Us "One Firm, Two Doors"
-------------------------------------------------------------
The illustration's own wall colour is too close to the tint to
read against it, so it sits in a white card which supplies the
contrast. Graphic left, text right.
============================================================= */
/* align-items:stretch (the grid default) lets the graphic card take its height
from the text column, which is what the Content Document asks for: "Card
height is fixed to match the text column exactly." The wireframe hard-coded
413px — the number the text happened to measure at the time — so any copy
edit would have silently broken the match. This re-derives it every render. */
.fork-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:stretch}
.fork-grid > *{min-height:0}
/* A full blank line between paragraphs here, rather than the 16px used in the
Story rows. Two reasons: the text column sits beside a 413px graphic card and
the extra air brings the two to a similar height, and this column carries
three dense paragraphs plus a link, which need more separation to read.
(18px x 1.7 line-height = ~30px, so 30px is literally one blank line.) */
.fork-grid p{font-size:18px;color:var(--body-deep);line-height:1.7}
.fork-grid p + p{margin-top:30px}
.fork-grid .more-link{margin-top:30px}
.fork-grid .more-link a{font-weight:600;color:var(--navy);font-size:18px}
.fork-graphic{
display:flex;align-items:center;justify-content:center;
height:100%;min-height:0;
background:var(--white);border-radius:14px;padding:24px;
box-shadow:0 20px 50px rgba(6,44,81,.08);
box-sizing:border-box;
}
.fork-graphic img{height:100%;width:auto;max-width:100%;object-fit:contain;min-height:0;min-width:0}
/* =============================================================
13d. VALUES ROW · About Us "Four Values Shared With Retinue"
-------------------------------------------------------------
A numbered row read as ONE bookended unit: dividers between
every item AND on both outer edges.
============================================================= */
.values-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:var(--content);margin:0 auto}
.value-item{padding:0 28px;text-align:center;border-left:1px solid var(--line)}
.value-item:last-child{border-right:1px solid var(--line)}
.value-num{color:var(--gold);font-weight:800;font-size:15px;letter-spacing:1px;margin-bottom:10px}
.value-item h3{
color:var(--navy);font-size:20px;font-weight:700;
padding-bottom:14px;margin-bottom:14px;
border-bottom:2px solid var(--gold);
display:inline-block;
}
.value-item p{font-size:16px;color:var(--body);line-height:1.65}
/* =============================================================
13e. CONTACT · info panel variant, socials, sign-off
-------------------------------------------------------------
Home's connected panel reused at a smaller icon size, because
keeping Contact short is an explicit goal for this page.
============================================================= */
.info-panel.contact-panel{margin-top:20px}
.contact-panel .info-seg{padding:26px 30px 30px}
.contact-panel .info-icon{width:56px;height:56px;margin:0 auto 4px}
.contact-panel .info-seg-head{min-height:44px;padding-bottom:8px;margin-bottom:12px}
.contact-panel .info-seg a{color:var(--navy);font-weight:600}
.social-links{display:flex;gap:14px;justify-content:center;margin-top:6px}
.social-links a{
width:36px;height:36px;border-radius:50%;background:var(--navy);
display:flex;align-items:center;justify-content:center;
}
.social-links svg{width:16px;height:16px;fill:#fff}
.c-signoff{
max-width:1100px;margin:30px auto 0;text-align:center;
color:var(--body);font-size:18px;font-style:italic;line-height:1.6;
}
/* =============================================================
13h. SERVICES PAGES · shared components
============================================================= */
/* --- Photo-led format cards (Training & Workshop) --- */
.formats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;text-align:center}
.format-photo{height:200px;width:100%;object-fit:cover;border-radius:12px;margin-bottom:18px}
.format-card h3{font-size:20px;color:var(--navy);font-weight:700;margin-bottom:10px}
.format-card p{font-size:16px;color:var(--body);line-height:1.6}
/* --- Audience cards: plain (Training) and bulleted (Individual Consulting) --- */
.audience-row{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;text-align:center}
.audience-card{
background:var(--white);border:1px solid var(--gold-light);
border-radius:8px;padding:36px 30px;
}
.audience-card h3{font-size:20px;color:var(--navy);font-weight:700;margin-bottom:10px}
.audience-card p{font-size:16px;color:var(--body);line-height:1.65}
/* The bulleted variant: Individual Consulting's two audiences carry more nuance
than Training's closely-related pair, so they list rather than describe. */
.audience-card ul{text-align:left;padding-left:20px;margin:0}
.audience-card li{font-size:16px;color:var(--body);line-height:1.65;margin-bottom:8px}
.audience-card li:last-child{margin-bottom:0}
/* --- Recognition / problem cards --------------------------------
Recognition-first, deliberately not a topic catalogue: each card
opens on a client-voiced problem, not a service name.
Numeral and heading centre; the quoted problem and the solution
line are LEFT-aligned, because centring multi-line paragraphs
hurts readability — a settled site rule.
---------------------------------------------------------------- */
.problems-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.prob-card{
background:var(--tint);border:1px solid var(--gold-light);
border-radius:8px;padding:26px 24px;text-align:center;
}
.prob-num{color:var(--gold);font-weight:800;font-size:14px;letter-spacing:1px;margin-bottom:8px}
.prob-card h4{font-size:20px;color:var(--navy);font-weight:700;margin-bottom:14px}
.prob-statement{
font-size:16px;color:#5A6672;line-height:1.6;
font-style:italic;margin-bottom:16px;text-align:left;
}
.prob-rule{height:2px;width:36px;background:var(--gold);margin:0 auto 14px}
/* Designing Learning Programs reuses this card for a single paragraph, with no
quote and no divider — hence .prob-help standing alone there. */
.prob-help{font-size:16px;color:var(--body-deep);line-height:1.6;text-align:left}
.prob-closing-row{
display:flex;align-items:center;justify-content:space-between;
gap:30px;max-width:var(--content);margin:40px auto 0;
}
.prob-closing-row p{
font-size:18px;font-style:italic;color:var(--body-deep);
line-height:1.6;text-align:left;margin:0;
}
/* --- Alternating vertical timeline (all three Services pages) ---
Steps 1 and 3 sit left, 2 and 4 right, threaded on a thin gold
centre line. Chosen over a horizontal row because it gives each
step full column width — a horizontal version would have forced a
font-size reduction — and because it collapses cleanly to one
column with the marker at the left edge.
---------------------------------------------------------------- */
.tl-wrap{position:relative;max-width:900px;margin:0 auto;padding:10px 0}
.tl-wrap::before{
content:"";position:absolute;left:50%;top:6px;bottom:6px;
width:1px;background:var(--gold-light);transform:translateX(-50%);
}
.tl-row{display:grid;grid-template-columns:1fr 56px 1fr;align-items:start;position:relative}
.tl-row:not(:last-child){margin-bottom:36px}
.tl-content{padding:2px 26px}
.tl-row.tl-left .tl-content{grid-column:1;text-align:left}
.tl-row.tl-right .tl-content{grid-column:3;text-align:left}
.tl-marker{grid-column:2;display:flex;justify-content:center}
.tl-badge{
width:38px;height:38px;border-radius:50%;
background:var(--white);border:2px solid var(--gold);
display:flex;align-items:center;justify-content:center;
color:var(--gold);font-weight:800;font-size:14px;z-index:2;
}
.tl-content h4{font-size:20px;color:var(--navy);font-weight:700;margin-bottom:8px}
.tl-content p{font-size:16px;color:var(--body);line-height:1.6}
/* --- "Sound Familiar?" panel (Individual Consulting) -------------
Home's connected panel as a 3x2 grid. Everything centres here,
unlike Training's mixed alignment, because these are short
declarative statements rather than long paragraphs.
---------------------------------------------------------------- */
.sf-panel{background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sf-row{display:grid;grid-template-columns:repeat(3,1fr)}
.sf-hdivider{height:1px;background:var(--line);margin:0 18%}
.sf-seg{padding:36px 30px 40px;position:relative}
.sf-seg:not(:last-child)::after{
content:"";position:absolute;right:0;top:20%;bottom:20%;
width:1px;background:var(--line);
}
.sf-icon{width:100px;height:100px;object-fit:contain;margin:0 auto 14px;display:block}
.sf-cat{
color:var(--gold);font-size:20px;font-weight:700;
text-transform:uppercase;letter-spacing:.4px;
margin-bottom:10px;text-align:center;
}
/* Category label, bold statement and body all sit in Tier 2; weight alone
separates the statement from the body beneath it. */
.sf-seg h4{font-size:16px;color:var(--navy);font-weight:700;line-height:1.4;margin-bottom:8px;text-align:center}
.sf-seg p{font-size:16px;font-weight:400;color:var(--body);line-height:1.6;text-align:center}
/* --- Larger composed icons (Designing Learning Programs) ---------
140px against Home's 100px: these icons are inherently lighter in
visual density, so they need the extra size to carry equal weight.
---------------------------------------------------------------- */
.build-icon{width:140px;height:140px;margin:0 auto}
.build-icon img{width:100%;height:100%;object-fit:contain}
/* A closing italic line beneath a section's cards. */
.section-close{
text-align:center;font-size:18px;color:var(--body);
font-style:italic;line-height:1.6;margin:36px auto 0;max-width:900px;
}
/* =============================================================
13f. FOUNDER PROFILE · Kavita's Bio
-------------------------------------------------------------
The one hero on the site that is NOT copy-left / photo-right.
This one carries roughly four paragraphs — double any other
hero — and a side-by-side split stretched the photo into an
unusable tall column, so the portrait sits centred above the
text instead.
============================================================= */
.hero.bio{padding:56px 0 64px}
.bio-hero-photo{width:340px;margin:0 auto 36px}
.bio-hero-photo img{
width:340px;height:340px;
border-radius:50%;object-fit:cover;
display:block;
box-shadow:0 20px 50px rgba(6,44,81,.18);
}
.bio-hero-text{max-width:760px;margin:0 auto;text-align:center}
.bio-hero-text .kicker{display:flex;justify-content:center}
.bio-hero-text h1{margin-top:6px}
/* Headings and the dot device centre; the paragraphs stay left-aligned, because
four centred paragraphs is a wall of ragged edges to read. */
.bio-hero-text p{text-align:left;margin-top:16px;font-size:18px;color:var(--body-soft)}
.bio-prose{max-width:900px;margin:0 auto;text-align:center}
.bio-prose p{font-size:18px;color:var(--body);line-height:1.7}
.bio-prose p + p{margin-top:18px}
.bio-cred-cols{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:20px}
.bio-cred-card{
background:var(--white);border:1px solid var(--gold-light);
border-radius:8px;padding:32px 24px;text-align:center;
}
.bio-cred-card h3{font-size:20px;color:var(--navy);font-weight:700;margin-bottom:18px}
.bio-cred-card ul{list-style:none;padding:0;margin:0;text-align:left}
/* The wireframe sets white-space:nowrap here. At desktop every entry fits
anyway, so nowrap buys nothing and guarantees overflow the moment the card
narrows — the longest line ("Senior Vice President, Tax Accounting and
Reporting Lead, Citi India") is ~435px against a 515px card. Left to wrap. */
.bio-cred-card li{font-size:14px;color:var(--body);line-height:1.6;margin-bottom:10px}
.bio-cred-card li:last-child{margin-bottom:0}
/* =============================================================
13g. PRIVACY & CONFIDENTIALITY
-------------------------------------------------------------
Adapted from Retinue's page of the same name, reskinned to
Elevare. Retinue leans on its serif for the lead, the section
headings, the italic concept lines and In Essence; Elevare has
no serif, so WEIGHT carries that hierarchy instead — the same
job done with one family.
A narrower 900px measure than the site's 1160px: this is long
continuous prose, and a shorter line is easier to read.
============================================================= */
.pv-wrap{max-width:900px;margin:0 auto}
.pv-lead{font-size:24px;line-height:1.35;color:var(--navy);font-weight:600;margin:0 0 14px}
.pv-introp{font-size:18px;line-height:1.7;color:var(--body-deep);margin:0 0 16px}
.pv-introp:last-child{margin-bottom:0}
/* The assurance strip: a white box on the tint band, gold-light border to match
the card treatment used elsewhere, with one gold line icon. */
.pv-assure{
display:flex;align-items:flex-start;gap:16px;
background:var(--white);border:1px solid var(--gold-light);
border-radius:10px;padding:22px 26px;
max-width:900px;margin:0 auto;
}
.pv-assure svg{flex:none;margin-top:2px}
.pv-assure p{font-size:18px;line-height:1.6;color:var(--body);margin:0}
.pv-sec h2{
font-size:30px;color:var(--navy);font-weight:600;
margin:0 0 6px;display:flex;align-items:center;gap:12px;
}
.pv-sec h2 svg{flex:none}
.pv-sec p{font-size:18px;line-height:1.72;color:var(--body-deep);margin:0 0 18px}
/* The concept line under each heading. Italic navy at 500 — the same treatment
as the "What the Name Means" statement, so the site has one voice for a
sentence that states a principle. */
.pv-sec p.pv-concept{
font-size:21px;line-height:1.4;color:var(--navy);
font-style:italic;font-weight:500;margin:0 0 14px;
}
.pv-sec p:last-child{margin-bottom:0}
/* In Essence — Elevare's navy callout, the same device as Home's Result box. */
.pv-essence{
background:var(--navy);border-radius:12px;
padding:34px 40px;max-width:900px;margin:0 auto;
text-align:center;color:#EAF2FB;
}
.pv-essence h2{font-size:28px;color:#fff;font-weight:600;margin:0 0 14px}
.pv-essence p{font-size:19px;line-height:1.7;margin:0 0 6px;color:#DBE8F6}
.pv-essence .pv-close{font-size:21px;color:#fff;margin:14px 0 0}
.pv-essence .pv-close a{color:var(--gold);font-weight:500}
.pv-essence .pv-close a:hover{color:var(--gold-light)}
/* 900px, not Retinue's 820px: this sentence measures 866px on one line, so the
narrower cap broke it across two. Matching the page measure holds it to a
single line at desktop and tablet with room to spare for font-rendering
differences, and it still wraps naturally on a phone — where one line is
impossible anyway, and where white-space:nowrap would have forced a
horizontal scroll. */
.pv-contact{font-size:18px;line-height:1.65;color:var(--body);text-align:center;margin:0 auto;max-width:900px}
.pv-contact a{color:var(--navy);font-weight:600}
/* =============================================================
14. 404
============================================================= */
.e404{text-align:center;padding:40px 0 20px}
.e404 .code{font-size:72px;font-weight:700;color:var(--navy);line-height:1}
.e404 .dots{justify-content:center;margin:18px 0 22px}
.e404 h1{font-size:34px;margin-bottom:14px}
.e404 p{font-size:18px;color:var(--body);max-width:560px;margin:0 auto 28px}
/* =============================================================
15. RESPONSIVE · three tiers
-------------------------------------------------------------
Desktop >=1024px layouts as authored in the wireframes
Tablet <=1023px header collapses to the hamburger; heroes and
panels stack; the wave becomes a list
Mobile <=767px type and spacing step down
The wireframes are a DESKTOP specification (Content Document: the
mobile items are "WS9 build requirements rather than wireframe
defects"), so everything below is built here, on Retinue's proven
breakpoint model.
============================================================= */
/* ---------- TABLET and below ---------- */
@media (max-width:1023px){
:root{--wrap-pad:28px}
/* Header collapses to the hamburger across the WHOLE tablet range, not just
below 768 — Elevare's bar carries a 110px lockup plus four nav items, and
wraps into the hero well before phone widths. */
.nav-in{min-height:0;padding-top:16px;padding-bottom:16px}
.nav-logo{height:84px}
.nav-brand{margin-left:-16px}
.nav-toggle{display:inline-block}
.nav-r{
display:none;width:100%;order:3;
margin-top:14px;padding-top:6px;
border-top:1px solid var(--line);
flex-direction:column;align-items:stretch;gap:0;
}
.site-header.open .nav-r{display:flex}
.nav-r > a{
display:block;padding:13px 2px;font-size:16px;
border-bottom:1px solid var(--line);
}
.nav-r a.contact{
display:block;text-align:center;margin-top:16px;padding:13px 22px;
border-bottom:0;
}
/* Services becomes a tap-to-expand accordion — hover does not exist on
touch, so the dropdown is driven by nav.js toggling .open. */
.nav-services{width:100%;border-bottom:1px solid var(--line)}
.nav-services > .nav-services-label{
display:flex;width:100%;justify-content:space-between;
padding:13px 2px;font-size:16px;
}
/* The desktop chevron is a 10px hint beside a hover target. Here it is the
only affordance saying "this expands", on a touch target — so it needs to
be big enough to read and to aim at. */
.nav-services > .nav-services-label::after{
font-size:16px;line-height:1;
transition:transform .2s;
}
.nav-services.open > .nav-services-label::after{transform:rotate(180deg)}
.nav-services:hover .dd,
.nav-services:focus-within .dd{display:none} /* hover must not fire on touch */
.nav-services.open .dd{display:block}
.nav-services .dd{
position:static;margin:0 0 10px;border:0;border-radius:0;
box-shadow:none;min-width:0;padding:0 0 0 14px;
background:transparent;
}
.nav-services .dd a{padding:10px 0;font-size:15px}
/* Hero stacks — the photo must never collapse to a sliver in a side column.
height:100% is released here, since there is no longer a text column to
match; an explicit height keeps the crop sensible. */
.hero{padding:48px 0 56px}
.hero-grid{grid-template-columns:1fr;gap:32px}
.hero h1{font-size:36px}
.hero.inner h1{font-size:30px}
.hero-copy p.lead{max-width:none}
.hero-media{height:auto}
.hero-photo{height:360px}
/* Connected panel stacks; the vertical dividers become horizontal rules. */
.info-panel{grid-template-columns:1fr}
.info-seg{padding:32px 26px 44px}
.info-seg:not(:last-child)::after{
right:auto;top:auto;left:12%;bottom:0;
width:76%;height:1px;
}
/* The wave retires; the same label markup reflows into a vertical stack,
echoing the gold-rule device used elsewhere on the site. */
.journey-wrap{margin-top:8px;height:auto !important}
.journey-svg{display:none}
/* Kept at single-class specificity so the mobile block below can override
these without having to restate .above — the .above variant carries ONLY
its transform reset, which is all it actually needs. */
.journey-text{
position:static;width:auto;transform:none;
left:auto !important;top:auto !important;
text-align:left;
padding:16px 0 16px 20px;
border-left:2px solid var(--gold-light);
}
.journey-text.above{transform:none}
.journey-text + .journey-text{margin-top:2px}
.j-num,.j-heading,.j-desc{text-align:left}
.section-head{margin-bottom:32px}
.section-head h2,
.section-head h1{font-size:30px}
.section-head.lead h1{font-size:34px}
.result-box{padding:26px 30px;max-width:none}
/* --- About Us --- */
/* Text and photo stack; the photo keeps a fixed height so a portrait source
still presents as a band rather than running the page length. */
.story-grid,
.fork-grid{grid-template-columns:1fr;gap:28px}
/* Photo above the text once stacked, so these rows read the same way as the
two-doors row below them — which has its graphic first in the DOM and so
stacked image-first already. The DOM order stays text-then-photo (content
before decoration, and the "Read Full Profile" link stays in the natural
tab order); only the visual order changes. */
.story-grid .story-photo-wrap{order:-1}
.story-photo-wrap{height:300px}
.fork-graphic{height:auto;padding:20px}
.fork-graphic img{height:auto;width:100%}
.name-means-box{padding:36px 32px}
.name-means-statement{margin-top:18px}
.name-means-statement p{font-size:21px}
.name-means-box.compact{padding:34px 30px}
/* The four values become 2x2. The left/right border pattern only reads as a
bookended row in ONE row, so it is replaced by a rule beneath each item. */
.values-row{grid-template-columns:repeat(2,1fr);gap:32px 0}
.value-item{border-left:0;padding:0 22px}
.value-item:last-child{border-right:0}
.value-item:nth-child(odd){border-right:1px solid var(--line)}
/* --- Contact --- */
.c-signoff{font-size:17px;margin-top:24px}
/* --- Services pages --- */
/* THE fix the wireframe never made: Training & Workshop's 12-card grid stays
three-wide at every width there, which on a phone gives ~100px columns.
Two columns at tablet, one on mobile. */
.problems-grid{grid-template-columns:repeat(2,1fr)}
/* Sound Familiar's 3x2 panel stacks, and its vertical dividers become
horizontal rules — the same treatment as the Home connected panel. */
.sf-row{grid-template-columns:1fr}
.sf-seg:not(:last-child)::after{right:auto;top:auto;left:12%;bottom:0;width:76%;height:1px}
.sf-hdivider{display:none}
.sf-seg{padding:30px 26px 34px}
.build-icon{width:120px;height:120px}
.section-close{font-size:17px}
/* --- Privacy --- */
.pv-lead{font-size:21px}
.pv-sec h2{font-size:26px}
.pv-sec p.pv-concept{font-size:19px}
.pv-essence{padding:28px 26px}
.pv-essence h2{font-size:24px}
/* --- Kavita's Bio --- */
.hero.bio{padding:40px 0 48px}
.bio-hero-photo{width:260px;margin-bottom:28px}
.bio-hero-photo img{width:260px;height:260px}
.bio-cred-cols{grid-template-columns:1fr;gap:20px}
/* Footer: the row becomes a centred stack. */
.foot-in{flex-direction:column;align-items:center;text-align:center;gap:14px;padding-top:24px}
.foot-tag{border-left:0;padding-left:0}
.foot-r{margin-left:0;justify-content:center;gap:10px 20px}
.foot-services{width:auto;border-bottom:0}
.foot-services > .nav-services-label{width:auto;padding:0;font-size:13.5px;gap:5px}
.foot-services .dd{padding-left:0;text-align:center}
.foot-services .dd a{color:#DCE6EF;padding:8px 0}
.foot-services .dd a:hover{background:transparent;color:#fff}
/* The copyright line stops being absolutely centred — that combination of
position:absolute + white-space:nowrap is exactly what overflows a narrow
screen. Social tiles sit ABOVE the copyright, as Retinue does. */
.fcwrap{flex-direction:column;align-items:center;gap:14px;padding-bottom:20px}
.fcwrap .copy-text{
position:static;transform:none;white-space:normal;
text-align:center;order:1;
}
.foot-social{order:-1}
}
/* ---------- MOBILE ---------- */
@media (max-width:767px){
:root{--wrap-pad:20px}
.nav-logo{height:66px}
.nav-brand{margin-left:-12px}
section{padding:44px 0}
.hero{padding:32px 0 40px}
.hero h1{font-size:30px}
.hero.inner h1{font-size:26px}
.hero-copy p.lead{font-size:17px}
.hero-photo{height:240px}
.section-head h2,
.section-head h1{font-size:26px}
.section-head.lead h1{font-size:28px}
.section-head p{font-size:17px}
.kicker{font-size:15px;letter-spacing:1.5px}
/* --- About Us --- */
.story-grid p{font-size:17px}
.story-photo-wrap{height:220px}
.name-means-box{padding:28px 20px;border-radius:10px}
.name-means-statement p{font-size:18px}
.name-means-box.compact{padding:26px 20px}
.name-means-box.compact h3{font-size:19px}
.name-means-box.compact p{font-size:17px}
/* The couplet plus both dot clusters needs ~410px and there are 335px, so the
row cannot hold. Stacking the three into a column keeps the device framing
the line — above and below instead of left and right — rather than letting
the two clusters wrap onto one row and read as six stray dots. */
.name-means-tagline{flex-direction:column;gap:12px;margin-top:20px}
.name-means-tagline p{font-size:16px;text-align:center}
/* Four values become a single column; every divider becomes a rule between. */
.values-row{grid-template-columns:1fr;gap:0}
.value-item{padding:22px 0;border-left:0;border-bottom:1px solid var(--line)}
.value-item:nth-child(odd){border-right:0}
.value-item:last-child{border-right:0;border-bottom:0}
/* --- Contact --- */
.contact-panel .info-seg{padding:22px 18px 26px}
.c-signoff{font-size:16px}
/* --- Services pages --- */
.formats-row{grid-template-columns:1fr;gap:28px}
.audience-row{grid-template-columns:1fr;gap:20px}
.audience-card{padding:28px 22px}
.problems-grid{grid-template-columns:1fr;gap:16px}
.prob-card{padding:22px 20px}
.prob-card h4{font-size:18px}
/* Text and button stop competing for one row. */
.prob-closing-row{flex-direction:column;align-items:stretch;gap:18px;margin-top:30px}
.prob-closing-row p{text-align:center;font-size:17px}
.prob-closing-row .btn{width:100%}
/* Timeline to a single column, marker moved to the left edge.
The spacer MUST be removed and both remaining items pinned to row 1.
Without that, the two row variants render differently: a tl-left row has
the content first in the DOM, so it auto-places into row 1 and the marker —
which has an explicit column but an auto row — gets pushed to row 2 by
grid's sparse placement algorithm. The badge then sits ~143px BELOW its own
heading, while tl-right rows happen to come out right. The wireframe's
mobile rule has this same defect; it was never seen because nobody opened
a wireframe on a phone. Found on a real device, 12 Sep 2026. */
.tl-wrap::before{left:19px}
.tl-row{grid-template-columns:38px 1fr}
.tl-row:not(:last-child){margin-bottom:28px}
.tl-spacer{display:none}
.tl-marker{grid-column:1;grid-row:1}
.tl-row.tl-left .tl-content,
.tl-row.tl-right .tl-content{grid-column:2;grid-row:1;text-align:left;padding:2px 0 2px 20px}
.tl-content h4{font-size:18px}
.sf-icon{width:84px;height:84px}
.sf-cat{font-size:17px}
.build-icon{width:110px;height:110px}
.section-close{font-size:16px}
/* --- Privacy --- */
.pv-lead{font-size:19px}
.pv-introp{font-size:17px}
.pv-sec h2{font-size:22px;gap:10px}
.pv-sec h2 svg{width:22px;height:22px}
.pv-sec p{font-size:17px}
.pv-sec p.pv-concept{font-size:18px}
/* The icon stops sharing a line with the text; on a 335px row a 26px icon
plus 16px gap leaves too little for the sentence. */
.pv-assure{flex-direction:column;gap:12px;padding:20px 18px}
.pv-assure p{font-size:17px}
.pv-essence{padding:24px 18px}
.pv-essence h2{font-size:22px}
.pv-essence p{font-size:17px}
.pv-essence .pv-close{font-size:18px}
.pv-contact{font-size:17px}
/* --- Kavita's Bio --- */
.bio-hero-photo{width:200px;margin-bottom:22px}
.bio-hero-photo img{width:200px;height:200px}
.bio-hero-text p{font-size:17px}
.bio-prose p{font-size:17px}
.bio-cred-card{padding:24px 18px}
.info-seg{padding:28px 20px 40px}
.info-icon{width:84px;height:84px}
.info-seg-head{min-height:0}
.info-seg h3{font-size:18px}
.journey-text{padding-left:16px}
.j-desc{font-size:15px}
.result-box{padding:22px 20px;border-radius:10px}
.result-box p{font-size:17px}
.cta-band{padding:36px 0}
.cta-band h2{font-size:22px}
.cta-band p{font-size:17px}
/* The button's top offset exists to align it with the body text beside the
heading; once stacked there is nothing to align to. */
.cta-band .btn{margin-top:20px;width:100%}
.cta-row{gap:0}
.foot-logo{height:56px}
.foot-r{gap:8px 16px}
.foot-r a{font-size:13px}
.e404 .code{font-size:56px}
.e404 h1{font-size:26px}
.e404 p{font-size:17px}
}
/* ---------- Respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
*{scroll-behavior:auto !important;transition-duration:.01ms !important}
}