/* SpeakEng V1 draft — shared styles across all pages Palette is strictly the 6 approved brand swatches (Tadelakt, Clay Shadow, Whitewash, Ironwork, Cypress, Limestone) — no other colour is used for site chrome (backgrounds, text, borders, buttons). The logo, topic icons and banner are fixed full-colour brand artwork and are exempt, used as supplied. Note: Ironwork and Clay Shadow's roles are swapped from the brand guide's own assignment, per her request — --ink now holds Clay Shadow's hex and --clay now holds Ironwork's hex, so body text/nav bar render in Clay Shadow and hover/pressed states + tags render in Ironwork. Type: SpeakengFont (the studio's own hand-painted face, digitised) for the wordmark/hero moments, Shantell Sans for headings, Karla for body — per Branding/SpeakEng-Brand-Guide.html. Shantell Sans + Karla are loaded via Google Fonts link tags in each page's . */ @font-face{ font-family:'SpeakengFont'; src:url('fonts/SpeakengFont-Regular.ttf') format('truetype'); font-weight:400;font-style:normal;font-display:swap; } :root{ --tadelakt:#bd5b37; --clay:#2a211b; --whitewash:#f6f1e6; --ink:#7a3b26; --cypress:#6c7f4e; --limestone:#dcd0b9; --bg:var(--limestone);--card:#f6f1e6;--ink-soft:rgba(122,59,38,.72);--line:var(--limestone); --font-hand:'SpeakengFont',cursive; --font-display:'Shantell Sans',ui-rounded,-apple-system,sans-serif; --font-body:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; --r-chip:10px;--r-sm:14px;--r-card:18px;--r-panel:20px;--r-window:24px;--pill:999px; --sh-panel:0 26px 48px -18px rgba(122,59,38,.15); --sh-card:0 14px 28px -10px rgba(122,59,38,.12); --sh-sm:0 10px 20px -9px rgba(122,59,38,.10); --glass-bg:rgba(246,241,230,.74); --glass-border:rgba(246,241,230,.65); --rail-bg:var(--ink);--rail-text:rgba(246,241,230,.72);--rail-strong:var(--whitewash);--rail-hover:rgba(246,241,230,.09); } *{margin:0;padding:0;box-sizing:border-box} html{overflow-x:hidden} body{font-family:var(--font-body);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;position:relative;padding:56px clamp(16px,4vw,32px) 90px} body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0; opacity:.4;mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,"); } h1,h2,h3,h4{letter-spacing:-.2px;font-family:var(--font-display);font-weight:700} em{font-style:normal;color:var(--cypress)} a{color:inherit} img{display:block;max-width:100%} .wrap{max-width:920px} /* =================================================================== Outer shell: flush against the page background, no frame/border — sidebar slab + glass panel float directly on it. =================================================================== */ .shell{ position:relative;z-index:1; } /* =================================================================== Sidebar rail — a floating dark slab fixed to the viewport, so it and the logo never move on scroll. Sized to its own content (not 100vh) so it stays wholly visible without needing to scroll internally; max-height is only a safety net for unusually short viewports. =================================================================== */ nav.rail{ position:fixed;top:40px;left:24px;z-index:5; width:260px;max-height:calc(100vh - 80px);overflow-y:auto; background:var(--rail-bg);color:var(--rail-text); border-radius:var(--r-window);box-shadow:var(--sh-panel); padding:66px 16px 22px;display:flex;flex-direction:column; } /* logo badge — fixed alongside the rail so it breaks out over its top edge without moving independently or being clipped by the rail's own scroll */ .logo-badge{position:fixed;z-index:6;top:14px;left:54px;width:84px;height:84px;text-decoration:none} .logo-badge img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(122,59,38,.35))} .rail-nav{list-style:none;display:flex;flex-direction:column;gap:6px;padding:0 10px} .rail-nav a{ display:flex;align-items:center;gap:10px;height:40px; text-decoration:none;color:var(--rail-text);font-size:13.5px;font-weight:600; padding:0 12px;border-radius:var(--pill); margin:0 -10px;width:calc(100% + 20px); transition:background .15s,color .15s; } .rail-nav a:hover{background:var(--rail-hover);color:var(--rail-strong)} .rail-nav a.active{background:var(--tadelakt);color:var(--whitewash);box-shadow:var(--sh-sm)} .rail-nav a .ic{flex:none;width:18px;height:18px} .rail-nav a .ic img{width:100%;height:100%;object-fit:contain} .rail-div{height:1px;background:rgba(246,241,230,.14);margin:18px 10px} .rail-cta{position:relative;margin:0 2px;background:var(--tadelakt);color:var(--whitewash);border-radius:var(--r-sm);padding:14px} .rail-cta b{display:block;font-size:14px;margin-bottom:4px;font-family:var(--font-display)} .rail-cta p{font-size:11.5px;line-height:1.45;color:rgba(246,241,230,.85);margin-bottom:12px} .rail-cta .pill-btn{display:inline-block;background:var(--whitewash);color:var(--tadelakt);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;padding:7px 16px;border-radius:var(--pill)} .rail-cta .prop-mini{position:absolute;top:-14px;right:-10px;width:34px;height:34px;transform:rotate(8deg)} .rail-cta .prop-mini img{width:100%;height:100%;object-fit:contain} .rail-foot{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:8px} .rail-signin{font-size:12.5px;font-weight:700;text-decoration:none;color:var(--rail-strong);border:1.5px solid rgba(246,241,230,.3);padding:9px 12px;border-radius:var(--pill);text-align:center} .rail-signin:hover{border-color:rgba(246,241,230,.6)} .tempmap{font-size:10.5px;font-weight:800;text-decoration:none;color:var(--whitewash);border:1px dashed rgba(246,241,230,.4);background:rgba(42,33,27,.5);padding:6px 10px;border-radius:var(--pill);text-align:center} .tempmap:hover{background:rgba(42,33,27,.7)} /* =================================================================== Content panel — glass surface. No horizontal padding on the panel itself so the banner (index only) can run full-bleed; padded content lives in .panel-body instead. =================================================================== */ main{display:block;min-width:0;margin-left:calc(308px - clamp(16px,4vw,32px))} .panel{ position:relative;background:var(--glass-bg); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); border:1px solid var(--glass-border);border-radius:var(--r-panel); box-shadow:var(--sh-panel);overflow:hidden; } .panel-body{padding:0 clamp(18px,3vw,34px) 34px} /* banner artwork, full-bleed at the top of the homepage panel */ .banner-wrap{position:relative} .banner{width:100%;height:150px;object-fit:cover} .banner-wrap .tb-icons{position:absolute;top:16px;right:16px;z-index:2} /* topbar (non-banner pages) */ .topbar{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:22px 0 18px;margin-bottom:6px;border-bottom:1px solid var(--line)} .tb-icons{display:flex;gap:10px} .tb-icon{width:38px;height:38px;flex:none} .tb-icon img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(122,59,38,.35))} /* ---- hero ---- */ .hero{position:relative;padding:36px 0 34px;border-bottom:1px solid var(--line)} .eyebrow{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--tadelakt)} .hero h1{font-size:38px;line-height:1.14;letter-spacing:-1px;margin-top:10px} .hero .lede{font-family:var(--font-body);font-size:15.5px;color:var(--ink-soft);margin-top:14px;max-width:60ch} section{padding:32px 0;border-bottom:1px solid var(--line)} section:last-of-type{border-bottom:none} .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap} section h2{font-size:23px} .sec-ctrl{font-family:var(--font-body);font-size:12.5px;font-weight:700;text-decoration:none;color:var(--tadelakt);white-space:nowrap} section .lede{font-family:var(--font-body);font-size:14.5px;color:var(--ink-soft);margin-top:8px;max-width:64ch} /* ---- course / level cards (illustration tile + chip) ---- */ .lvls{display:grid;grid-template-columns:repeat(3,1fr) 0.7fr;gap:16px;margin-top:20px} .lvl{position:relative;background:var(--card);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-card);display:flex;flex-direction:column;text-decoration:none;color:inherit} .lvl .illus{position:relative;height:92px;display:flex;align-items:flex-end;padding:12px 14px} .lvl .illus .glyph{position:absolute;top:8px;left:10px;width:40px;height:40px} .lvl .illus .glyph img{width:100%;height:100%;object-fit:contain} .lvl .illus h3{position:relative;color:var(--whitewash);font-size:16px} .lvl .chip{position:absolute;top:10px;right:10px;background:rgba(246,241,230,.3);color:var(--whitewash);font-family:var(--font-body);font-size:9.5px;font-weight:800;letter-spacing:.05em;padding:5px 9px;border-radius:var(--r-chip)} .lvl .bd{padding:14px 16px 16px;font-family:var(--font-body)} .lvl .lv{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.9px;color:var(--ink-soft)} .lvl p{font-size:12.5px;color:var(--ink-soft);margin-top:8px} .l1 .illus{background:var(--cypress)} .l2 .illus{background:var(--tadelakt)} .l3 .illus{background:var(--ink)} .lvl.biz{border:2px solid var(--clay)} .lvl.biz .illus{background:var(--clay)} .tag{display:inline-block;font-family:var(--font-body);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--whitewash);background:var(--clay);padding:4px 10px;border-radius:var(--pill);white-space:nowrap} .price{font-weight:800;color:var(--tadelakt)} /* ---- booking section: teacher card floats over it, half in / half out ---- */ #book{position:relative} .teacher-card{ position:absolute;top:20px;right:0;z-index:3; width:320px;background:var(--whitewash);color:var(--ink);border:2px solid var(--cypress);border-radius:var(--r-panel); box-shadow:var(--sh-card);padding:16px;text-align:center; } .teacher-photo{ width:132px;height:132px;border-radius:50%;object-fit:cover; border:4px solid var(--card); margin:-76px auto 10px;box-shadow:var(--sh-sm); } .teacher-card h4{font-size:15px;color:var(--cypress)} .teacher-card .blurb{font-family:var(--font-body);font-size:12px;color:rgba(108,127,78,.8);margin-top:6px;text-align:left} .teacher-card .blurb + .blurb{margin-top:10px} .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px} .btn{font-family:var(--font-body);font-weight:700;font-size:13px;text-decoration:none;color:var(--whitewash);background:var(--tadelakt);border:1.5px solid var(--tadelakt);padding:11px 20px;border-radius:var(--pill);display:inline-block} .btn:hover{background:var(--clay);border-color:var(--clay)} .btn-ghost{font-family:var(--font-body);font-size:12.5px;font-weight:700;text-decoration:none;color:var(--ink);border:1.5px solid var(--line);padding:10px 18px;border-radius:var(--pill);display:inline-block;background:transparent} .btn-ghost:hover{border-color:var(--ink)} .two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px} .blk{background:var(--card);border-radius:var(--r-sm);padding:18px 20px;box-shadow:var(--sh-sm);font-family:var(--font-body)} .blk h3{font-size:15px} .blk p{font-size:13px;color:var(--ink-soft);margin-top:8px} .stub{background:var(--card);border:1px dashed var(--line);border-radius:var(--r-sm);padding:22px;margin-top:18px;color:var(--ink-soft);font-family:var(--font-body);font-size:14px} .stub b{color:var(--ink)} footer{border-top:1px solid var(--line);padding:22px 0 4px;font-family:var(--font-body);font-size:12px;color:var(--ink-soft)} .fl{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline} .fl .end{margin-inline-start:auto} @media(max-width:900px){ nav.rail{position:sticky;top:10px;left:auto;width:auto;max-height:none;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;border-radius:var(--r-sm);padding:10px 12px} .logo-badge{position:static;width:40px;height:40px;margin:0 auto 6px;filter:none} .rail-nav{flex-direction:row;overflow-x:auto;padding:0;gap:2px} .rail-nav a{white-space:nowrap;margin:0;width:auto} .rail-div,.rail-cta,.rail-foot{display:none} main{margin-left:0} .panel-body{padding:0 16px 26px} .hero h1{font-size:29px;letter-spacing:-.5px} .lvls,.two{grid-template-columns:1fr} .lvl.biz{max-width:100%} .teacher-card{position:static;width:auto;margin:24px 0 0} .teacher-photo{margin:0 auto 10px} .topbar{flex-wrap:wrap} }