/* ===================================================================== RAIZ HR CONSULTING — Brand stylesheet People. Purpose. Rooted in Impact. ===================================================================== */ :root { /* Density (tweakable) — scales vertical section padding & reveal-gap. */ --density: 1; --section-pad: calc(clamp(72px, 9vw, 140px) * var(--density)); --section-pad-sm: calc(clamp(56px, 6vw, 96px) * var(--density)); /* Brand palette — official Raiz Brand Guidelines */ --bark: #2A1116; /* deeper than Deep Root Burgundy, for darkest type */ --burgundy: #4B1F26; /* Deep Root Burgundy — primary brand */ --espresso: #6A4A3C; /* Warm Espresso Brown — grounding accent */ --rosa: #9A3D56; /* Dusty Berry — accent */ --terracotta: #B65E3C; /* Terracotta */ --gold: #C4934B; /* Golden Ochre */ --olive: #6D6A3D; /* Muted Olive */ --cream: #F4EEE8; /* Soft Cream Background — primary bg */ --cream-2: #EEE5D8; /* Card background */ --blush: #ECDCD8; /* Soft pink panel */ --sand: #E1D2B8; /* Subtle hairlines */ --ink: #2A2420; --ink-soft: #6A4A3C; /* uses Warm Espresso for secondary text */ --hairline: #DFCFB4; /* Typography */ --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif; --sans: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Scale */ --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 999px; --shadow-soft: 0 1px 2px rgba(43,14,20,.04), 0 12px 32px rgba(43,14,20,.06); --shadow-lift: 0 2px 6px rgba(43,14,20,.06), 0 30px 60px rgba(43,14,20,.10); --max: 1240px; --gutter: clamp(20px, 4vw, 56px); } /* Variation B overrides — switched at */ html[data-variation="b"] { --cream: #F7EFE3; --cream-2: #EFE4D2; --hairline: #D9C7AB; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { background: var(--cream); min-height: 100vh; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--bark); letter-spacing: -0.005em; line-height: 1.05; margin: 0; text-wrap: balance; } h1 { font-size: clamp(48px, 7vw, 104px); letter-spacing: -0.02em; } h2 { font-size: clamp(36px, 4.6vw, 64px); letter-spacing: -0.015em; } h3 { font-size: clamp(24px, 2.2vw, 34px); } h4 { font-size: clamp(20px, 1.4vw, 22px); font-family: var(--sans); font-weight: 600; letter-spacing: 0; } p { margin: 0 0 1em; color: var(--ink); text-wrap: pretty; } .lede { font-size: clamp(18px, 1.4vw, 22px); color: var(--ink-soft); line-height: 1.55; } .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rosa); font-weight: 500; } .muted { color: var(--ink-soft); } .serif { font-family: var(--serif); } em.accent { font-style: italic; color: var(--rosa); font-family: var(--serif); font-weight: 500; } /* ---------- Layout helpers ---------- */ .wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-pad); position: relative; } .section--tight { padding-block: var(--section-pad-sm); } .divider { height: 1px; background: var(--hairline); margin-block: clamp(48px, 6vw, 88px); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: var(--r-xl); font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -0.005em; border: 1px solid transparent; transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease; } .btn:hover { transform: translateY(-1px); } .btn--primary { background: var(--burgundy); color: var(--cream); } .btn--primary:hover { background: var(--bark); } .btn--ghost { background: transparent; color: var(--bark); border-color: var(--bark); } .btn--ghost:hover { background: var(--bark); color: var(--cream); } .btn--cream { background: var(--cream); color: var(--bark); } .btn .arr { display: inline-block; transform: translateX(0); transition: transform .2s ease; } .btn:hover .arr { transform: translateX(4px); } /* Inline link with underline */ .ulink { border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color .2s; } .ulink:hover { color: var(--rosa); } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--cream) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: var(--max); margin: 0 auto; padding: 14px var(--gutter); } .nav__brand { display: flex; align-items: center; } .nav__brand img { width: 64px; height: 64px; object-fit: contain; border-radius: 50%; /* Mask the cream background slightly so it nests into the cream nav. */ mix-blend-mode: multiply; } .nav__links { display: flex; gap: 28px; align-items: center; } .nav__links a { font-size: 14.5px; color: var(--bark); position: relative; padding: 6px 2px; transition: color .2s; } .nav__links a:hover { color: var(--rosa); } .nav__links a.is-active { color: var(--rosa); } .nav__links a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--rosa); } .nav__cta { display: flex; align-items: center; gap: 10px; } /* Lang switch */ .lang { display: inline-flex; padding: 3px; border-radius: var(--r-xl); background: var(--cream-2); border: 1px solid var(--hairline); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; } .lang button { border: 0; background: transparent; color: var(--ink-soft); padding: 5px 10px; border-radius: var(--r-xl); text-transform: uppercase; } .lang button[aria-pressed="true"] { background: var(--bark); color: var(--cream); } /* Mobile nav hidden — small viewport menu just stacks below */ @media (max-width: 880px) { .nav__inner { flex-wrap: wrap; } .nav__links { order: 3; width: 100%; gap: 16px; flex-wrap: wrap; padding-top: 4px; } } /* ---------- Footer ---------- */ .footer { background: var(--bark); color: var(--cream); padding: 80px 0 36px; margin-top: clamp(80px, 10vw, 140px); } .footer h4 { font-family: var(--sans); color: var(--cream); opacity: .7; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 16px; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } .footer__brand { display: inline-block; background: var(--cream); padding: 14px; border-radius: 50%; line-height: 0; } .footer__brand img { width: 120px; height: 120px; object-fit: contain; border-radius: 50%; mix-blend-mode: multiply; } .footer a { color: var(--cream); opacity: .8; transition: opacity .2s; display: inline-block; padding: 4px 0; } .footer a:hover { opacity: 1; color: var(--terracotta); } .footer__list { display: flex; flex-direction: column; } .footer__legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(251,246,238,.12); display: flex; justify-content: space-between; font-size: 12px; color: var(--cream); opacity: .55; font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; } @media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__legal { flex-direction: column; gap: 8px; } } /* ---------- Cards & panels ---------- */ .card { background: var(--cream-2); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 36px; } .panel-blush { background: var(--blush); border-radius: var(--r-lg); padding: 56px; } .panel-dark { background: var(--bark); color: var(--cream); border-radius: var(--r-lg); padding: 64px; } .panel-dark h1, .panel-dark h2, .panel-dark h3 { color: var(--cream); } /* ---------- Image placeholders ---------- */ .imgph { position: relative; overflow: hidden; background: repeating-linear-gradient(135deg, rgba(92,26,43,.06) 0 14px, rgba(92,26,43,.02) 14px 28px), var(--cream-2); border: 1px solid var(--hairline); border-radius: var(--r-lg); color: var(--ink-soft); font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; } .imgph::before { content: ""; position: absolute; inset: 14px; border: 1px dashed var(--hairline); border-radius: calc(var(--r-lg) - 8px); pointer-events: none; } .imgph span { position: relative; z-index: 1; max-width: 80%; line-height: 1.6; } /* Tree silhouette watermark — drawn via the logo PNG, faded */ .tree-mark { position: absolute; pointer-events: none; opacity: .08; width: 600px; height: 600px; background: url("assets/raiz-tree-logo.png") center/contain no-repeat; } /* ---------- Tags / chips ---------- */ .chip { display: inline-flex; align-items: center; gap: 8px; background: var(--cream-2); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: 6px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-soft); text-transform: uppercase; } .chip .dot { width: 6px; height: 6px; background: var(--rosa); border-radius: 50%; } /* ---------- Section header ---------- */ .section-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 56px; } .section-head h2 { max-width: 16ch; } .section-head .lede { max-width: 42ch; } @media (max-width: 880px) { .section-head { flex-direction: column; align-items: flex-start; } } /* ---------- Tweaks panel (right side) ---------- */ .tweaks { position: fixed; right: 16px; bottom: 16px; z-index: 100; background: var(--cream); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); padding: 16px; width: 260px; display: none; } .tweaks.is-open { display: block; } .tweaks h5 { margin: 0 0 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); display: flex; justify-content: space-between; align-items: center; } .tweaks h5 button { background: transparent; border: 0; font-family: var(--mono); font-size: 14px; color: var(--ink-soft); } .tweak-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .tweak-row label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } .tweak-row .opts { display: flex; gap: 6px; flex-wrap: wrap; } .tweak-row .opts button { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--cream-2); color: var(--bark); font-size: 12px; } .tweak-row .opts button[aria-pressed="true"] { background: var(--bark); color: var(--cream); border-color: var(--bark); } /* ---------- Tiny utilities ---------- */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 36px); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2vw, 28px); } @media (max-width: 880px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* fade-in on scroll */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; } .reveal.is-in { opacity: 1; transform: translateY(0); } /* lang swap helper — content spans in inactive language are hidden. Scoped to descendants of so the itself doesn't match. Reveal rules use !important to win over the hide rule's slightly higher specificity (3 attrs vs 2). */ html[data-lang] [data-lang]:not([data-lang~="all"]) { display: none; } html[data-lang="en"] [data-lang~="en"] { display: revert !important; } html[data-lang="es"] [data-lang~="es"] { display: revert !important; } html[data-lang] [data-lang~="all"] { display: revert !important; } /* Section dividers — small icon */ .leaf-divider { display:flex; align-items:center; gap:14px; color: var(--gold); margin-block: 24px; } .leaf-divider::before, .leaf-divider::after { content:""; flex:1; height:1px; background: var(--hairline); } .leaf-divider svg { width:18px; height:18px; }