/* ══════════════════════════════════════════════════════════════ site.css — Page-layout compositions on top of brand tokens Brand tokens, type helpers, wordmark, buttons, notes, quotes, and graph module all live in /brand/fractionalkyle.css. This file holds the per-page layout glue: nav, hero, sections, service grid, footer, and the two-pane note layout. Baseline grid: every vertical value is calc(var(--line) * n) where --line = 34px. ══════════════════════════════════════════════════════════════ */ html, body { margin: 0; padding: 0; } img { display: block; max-width: 100%; } /* ────────────────────────────────────────────────────────────── NAV — sits on top of dark hero, transitions to light on scroll ────────────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 100; background: var(--g-900); border-bottom: 1px solid rgba(255,255,255,0.06); } /* Nav stays dark on every page — wordmark + links keep their on-dark treatment even when body is .on-light. Pin wordmark colors so the .on-light .wm rules in brand CSS don't bleed in here. */ .nav .wm .frac { color: #fff; } .nav .wm .kyle { color: var(--lime); } .nav-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1400px; margin: 0 auto; padding: calc(var(--line) * 0.6) calc(var(--line) * 2.5); height: calc(var(--line) * 2); } .nav .wm { font-size: 1.1rem; } .nav-links { display: flex; align-items: center; gap: calc(var(--line) * 0.8); } .nav-link { font-family: var(--type); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-300); text-decoration: none; transition: color 0.18s; } .nav-link:hover { color: var(--lime); } .nav-link.nav-active { color: var(--lime); font-weight: 700; } .nav-cta { font-size: 0.82rem !important; padding: 10px 18px !important; } /* Nav CTA stays on its dark-nav treatment (lime fill) even when the body is .on-light — otherwise the brand's .on-light .btn-primary rule would flip it to green on /notes, /books, and per-note pages. */ .nav .btn-primary { background: var(--lime); color: var(--g-900); } .nav .btn-primary:hover { background: var(--lime-bright); } .nav-hamburger { display: none; flex-direction: column; gap: 4px; background: none; border: 0; padding: 8px; cursor: pointer; } .nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--cool-paper); transition: background 0.18s; } .nav-mobile-menu { display: none; flex-direction: column; gap: calc(var(--line) * 0.5); padding: calc(var(--line)) calc(var(--line) * 2); background: var(--g-900); border-top: 1px solid rgba(255,255,255,0.06); } .nav-mobile-menu.open { display: flex; } .nav-mobile-link { font-family: var(--type); font-size: 0.95rem; color: var(--ink-300); text-decoration: none; padding: calc(var(--line) * 0.3) 0; } .nav-mobile-link.nav-active { color: var(--lime); } /* ────────────────────────────────────────────────────────────── PAGE-LEVEL — body backgrounds for the home page ────────────────────────────────────────────────────────────── */ body.home-page { background: var(--cool-paper); color: var(--ink); } /* The home page leads with a dark hero — by default body is dark. After the hero, content is on cool-paper. We use .on-light on when no dark hero is at top (other pages). */ /* ────────────────────────────────────────────────────────────── HERO — dark green, two columns: text + headshot ────────────────────────────────────────────────────────────── */ .hero { position: relative; background: var(--grad-hero); color: var(--cool-paper); /* Full-bleed dark band; horizontal padding lives on .hero-inner so the content column lines up with .section, .nav-inner, .footer-inner. */ padding: calc(var(--line) * 3) 0 calc(var(--line) * 4); } .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 440px; gap: calc(var(--line) * 2.5); align-items: center; max-width: 1400px; margin: 0 auto; padding: 0 calc(var(--line) * 2.5); } .hero-text { display: flex; flex-direction: column; gap: calc(var(--line)); } .role-tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--type); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lime); height: var(--line); align-self: flex-start; } .role-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(153, 219, 66, 0.18); } .hero-headline { font-family: var(--type); font-weight: 800; font-size: clamp(2.5rem, 5vw, 3.4rem); letter-spacing: -0.025em; line-height: calc(var(--line) * 1.4 / 3.4); color: var(--cool-paper); margin: 0; } /* simpler: use the brand display weight; line-height in line-units */ .hero-headline { line-height: 1.05; } .hero-sub { font-family: var(--body); font-size: 1.06rem; line-height: 1.52; color: var(--ink-300); margin: 0; max-width: 540px; } .hero-sub + .hero-sub { margin-top: calc(var(--line) * 0.5); } .hero-location { display: inline-flex; align-items: center; gap: 8px; font-family: var(--type); font-size: 0.78rem; color: var(--ink-500); height: var(--line); } .hero-location .icon-sm { width: 14px; height: 14px; } .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: calc(var(--line) * 0.3); } .hero-photo { position: relative; border-radius: 16px; overflow: hidden; background: var(--g-800); box-shadow: 0 24px 60px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08); } .hero-photo::after { content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(153, 219, 66, 0.08); } .hero-photo img { width: 100%; height: 480px; object-fit: cover; display: block; } /* ────────────────────────────────────────────────────────────── BUTTONS — icon spacing on top of brand .btn ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; } .btn-secondary { font-family: var(--type); font-weight: 700; font-size: 0.85rem; padding: 13px 22px; border-radius: 11px; background: transparent; color: var(--cool-paper); border: 1.5px solid rgba(255,255,255,0.18); text-decoration: none; transition: border-color 0.18s, color 0.18s; } .btn-secondary:hover { border-color: var(--lime); color: var(--lime); } body.on-light .btn-secondary { color: var(--ink); border-color: var(--ink-300); } body.on-light .btn-secondary:hover { color: var(--lime-deep); border-color: var(--lime-deep); } .btn-dark { font-family: var(--type); font-weight: 700; font-size: 0.85rem; padding: 13px 22px; border-radius: 11px; background: var(--g-900); color: var(--cool-paper); text-decoration: none; transition: background 0.18s; } .btn-dark:hover { background: var(--g-800); } .icon-sm { width: 16px; height: 16px; } .icon-footer { width: 18px; height: 18px; } /* ────────────────────────────────────────────────────────────── SECTIONS — generic structure on the light surface ────────────────────────────────────────────────────────────── */ .section { background: var(--cool-paper); padding: calc(var(--line) * 3) calc(var(--line) * 2.5); max-width: 1400px; margin: 0 auto; } .section-header { display: flex; flex-direction: column; gap: calc(var(--line) * 0.5); margin-bottom: calc(var(--line) * 2); } .section-label { font-family: var(--type); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--g-600); height: var(--line); display: flex; align-items: center; } .section-title { font-family: var(--type); font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.3rem); letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); margin: 0; max-width: 720px; } /* Divider — full line-row dashed per brand */ .divider { height: var(--line); border: 0; border-bottom: 1px dashed var(--ink-300); margin: 0 calc(var(--line) * 2); max-width: calc(1280px - var(--line) * 4); margin-left: auto; margin-right: auto; } /* ────────────────────────────────────────────────────────────── SERVICE CARDS — monochromatic, differentiated by icon + title ────────────────────────────────────────────────────────────── */ .service-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--line) * 1.2); } /* Service card — confident, tactile. Brand fx-offset shadow gives weight so each card reads as a distinct focus area. */ .card { position: relative; display: flex; flex-direction: column; gap: calc(var(--line) * 0.5); background: var(--white); border: 1.5px solid var(--ink); border-radius: 14px; padding: calc(var(--line) * 1.1) calc(var(--line)); box-shadow: 5px 5px 0 var(--g-700); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--g-700); border-color: var(--g-900); } .card-icon { width: 56px; height: 56px; border-radius: 12px; background: var(--lime); display: flex; align-items: center; justify-content: center; color: var(--g-900); box-shadow: 2px 2px 0 var(--g-700); } .card-icon svg { width: 26px; height: 26px; stroke: var(--g-900); stroke-width: 2; } .card-title { font-family: var(--type); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--ink); margin: 0; line-height: var(--line); height: var(--line); } .card-desc { font-family: var(--body); font-size: 1.02rem; line-height: 1.52; color: var(--ink-700); margin: 0; } .card-desc + .card-desc { margin-top: calc(var(--line) * 0.3); } .card-btn { margin-top: calc(var(--line) * 0.3); display: inline-flex; align-items: center; gap: 6px; font-family: var(--type); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lime-deep); align-self: flex-start; } .card-btn a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--lime); padding-bottom: 2px; transition: color 0.15s, border-color 0.15s; } .card-btn a:hover { color: var(--g-900); border-bottom-color: var(--g-900); } .card-btn a::after { content: " →"; color: var(--lime-deep); transition: transform 0.18s; display: inline-block; } .card-btn a:hover::after { color: var(--g-900); transform: translateX(2px); } .svc-footer { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--line)); flex-wrap: wrap; margin-top: calc(var(--line) * 2); padding-top: calc(var(--line)); border-top: 1px solid var(--ink-100); } .qualifier { font-family: var(--body); font-size: 1rem; line-height: 1.52; color: var(--ink-700); margin: 0; max-width: 720px; } /* ────────────────────────────────────────────────────────────── ABOUT — two columns: text + stacked photos ────────────────────────────────────────────────────────────── */ .about-section { display: grid; grid-template-columns: 1fr 480px; gap: calc(var(--line) * 3); align-items: start; } .about-text { display: flex; flex-direction: column; gap: calc(var(--line) * 0.5); } .about-title { font-family: var(--type); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.5rem); letter-spacing: -0.025em; line-height: 1.1; color: var(--ink); margin: 0; } .body-text { font-family: var(--body); font-size: 1.06rem; line-height: 1.52; color: var(--ink-700); margin: 0; max-width: 640px; } .body-text + .body-text { margin-top: calc(var(--line) * 0.5); } .edu-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: calc(var(--line) * 0.5); } .edu-tag { font-family: var(--type); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--g-700); background: var(--g-50); border: 1px solid var(--g-100); padding: 6px 12px; border-radius: 999px; } .about-photos { display: flex; flex-direction: column; gap: calc(var(--line) * 0.5); } .about-photo-1, .about-photo-2 { width: 100%; border-radius: 12px; border: 1px solid var(--ink-100); } .about-photo-1 { height: 320px; object-fit: cover; } .about-photo-2 { height: 240px; object-fit: cover; } .photo-caption { font-family: var(--type); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--ink-500); margin: 0; text-align: right; } /* ────────────────────────────────────────────────────────────── GARDEN TEASER — text left + note cards right ────────────────────────────────────────────────────────────── */ .garden-section { background: var(--g-50); padding: calc(var(--line) * 3) 0; } .garden-inner { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--line) * 3); max-width: 1400px; margin: 0 auto; padding: 0 calc(var(--line) * 2.5); } .garden-left { display: flex; flex-direction: column; gap: calc(var(--line) * 0.5); } .garden-title { font-family: var(--type); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.5rem); letter-spacing: -0.025em; line-height: 1.1; color: var(--ink); margin: 0; } .garden-left .btn-dark { align-self: flex-start; margin-top: calc(var(--line) * 0.5); } .garden-visual { display: flex; flex-direction: column; gap: calc(var(--line) * 0.5); } /* KG note card — same fx-offset signature as service cards, smaller scale */ .note-card { position: relative; display: flex; align-items: flex-start; gap: 14px; background: var(--white); border: 1.5px solid var(--ink); border-radius: 10px; padding: calc(var(--line) * 0.55) calc(var(--line) * 0.7); text-decoration: none; box-shadow: 4px 4px 0 var(--g-700); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .note-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--g-700); border-color: var(--g-900); } .note-card svg { margin-top: 3px; flex-shrink: 0; } .note-card .note-title { font-family: var(--type); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--ink); margin: 0; line-height: 1.3; } .note-card .note-tags { font-family: var(--body); font-size: 0.95rem; color: var(--ink-700); margin: 4px 0 0; line-height: 1.45; } /* ────────────────────────────────────────────────────────────── FINAL CTA — anchored deep-green band ────────────────────────────────────────────────────────────── */ .cta-section { position: relative; background: var(--grad-hero); color: var(--cool-paper); /* Full-bleed dark band; horizontal padding on .cta-inner so content aligns with the other sections. */ padding: calc(var(--line) * 3) 0; } .cta-inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 0 calc(var(--line) * 2.5); } .cta-left { display: flex; flex-direction: column; gap: calc(var(--line) * 0.5); max-width: 720px; } .cta-section .section-label { color: var(--lime); } .cta-title { font-family: var(--type); font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.025em; line-height: 1.05; color: var(--cool-paper); margin: 0; } .cta-section .body-text { color: var(--ink-300); } .cta-section .btn-primary { align-self: flex-start; margin-top: calc(var(--line) * 0.5); } .cta-contact { display: flex; flex-direction: column; gap: calc(var(--line) * 0.4); margin-top: calc(var(--line)); } .contact-row { display: flex; align-items: center; gap: 10px; font-family: var(--type); font-size: 0.88rem; } .contact-row .icon-sm { color: var(--ink-500); } .contact-link { color: var(--cool-paper); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.18); } .contact-link:hover { color: var(--lime); border-bottom-color: var(--lime); } /* ────────────────────────────────────────────────────────────── FOOTER — deep green ────────────────────────────────────────────────────────────── */ .footer { position: relative; background: var(--grad-hero); color: var(--ink-300); border-top: 1px solid rgba(255,255,255,0.06); } /* Footer stays dark on every page — wordmark keeps its on-dark treatment even when an ancestor (e.g. body.on-light on note pages) sets .on-light. Pin wordmark colors so the .on-light .wm rules in brand CSS don't bleed in. */ .footer .wm .frac { color: #fff; } .footer .wm .kyle { color: var(--lime); } /* Inner wrapper mirrors .nav-inner (1400 max + line*2.5 horizontal padding) so the footer content edges line up with the nav above. */ .footer-inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--line)); flex-wrap: wrap; padding: calc(var(--line)) calc(var(--line) * 2.5); } .footer-left, .footer-right { display: flex; align-items: center; gap: calc(var(--line) * 0.6); } .footer .wm { font-size: 1rem; } .footer-copy, .footer-tagline { font-family: var(--type); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-500); } .footer-right a { color: var(--ink-300); transition: color 0.18s; display: inline-flex; } .footer-right a:hover { color: var(--lime); } /* ────────────────────────────────────────────────────────────── COMING-SOON MODAL — used across pages ────────────────────────────────────────────────────────────── */ .cs-modal { display: none; position: fixed; inset: 0; background: rgba(11, 41, 25, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 600; align-items: center; justify-content: center; padding: 24px; } .cs-modal.open { display: flex; } .cs-panel { background: var(--cool-paper); border-radius: 14px; border: 1px solid var(--ink-100); max-width: 520px; width: 100%; padding: calc(var(--line)) calc(var(--line)); display: flex; flex-direction: column; gap: calc(var(--line) * 0.5); } .cs-label { font-family: var(--type); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lime-deep); } .cs-title { font-family: var(--type); font-weight: 700; font-size: 1.4rem; color: var(--ink); line-height: 1.2; margin: 0; } .cs-divider { height: 1px; background: var(--ink-100); } .cs-msg { font-family: var(--body); font-size: 1rem; line-height: 1.52; color: var(--ink-700); margin: 0; } .cs-actions { display: flex; align-items: center; gap: calc(var(--line) * 0.5); flex-wrap: wrap; margin-top: calc(var(--line) * 0.3); } .cs-cta { font-family: var(--type); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--g-900); background: var(--lime); border-radius: 11px; padding: 11px 18px; text-decoration: none; } .cs-cta:hover { background: var(--lime-bright); } .cs-close-btn { font-family: var(--type); font-size: 0.78rem; color: var(--ink-500); cursor: pointer; background: none; border: 0; letter-spacing: 0.04em; } /* ────────────────────────────────────────────────────────────── RESPONSIVE ────────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .nav-inner { padding: 14px calc(var(--line) * 1.5); } .hero { padding: calc(var(--line) * 2) 0 calc(var(--line) * 3); } .hero-inner { grid-template-columns: 1fr 360px; gap: calc(var(--line) * 1.5); padding: 0 calc(var(--line) * 1.5); } .hero-photo img { height: 420px; } .section { padding: calc(var(--line) * 2.5) calc(var(--line) * 1.5); } .service-cards { grid-template-columns: repeat(2, 1fr); gap: calc(var(--line)); } .about-section { grid-template-columns: 1fr 400px; gap: calc(var(--line) * 1.8); } .garden-inner { padding: 0 calc(var(--line) * 1.5); gap: calc(var(--line) * 1.8); } .cta-section { padding: calc(var(--line) * 2.5) 0; } .cta-inner { padding: 0 calc(var(--line) * 1.5); } .footer-inner { padding: calc(var(--line)) calc(var(--line) * 1.5); } } @media (max-width: 768px) { .nav-links { display: none; } .nav-hamburger { display: flex; } .nav-cta { display: none !important; } .hero { padding: calc(var(--line) * 1.5) 0 calc(var(--line) * 2); } .hero-inner { grid-template-columns: 1fr; padding: 0 calc(var(--line) * 0.7); } .hero-photo { order: -1; } .hero-photo img { height: 320px; } .section { padding: calc(var(--line) * 2) calc(var(--line) * 0.7); } .service-cards { grid-template-columns: 1fr; } .svc-footer { flex-direction: column; align-items: flex-start; } .about-section { grid-template-columns: 1fr; } .about-photo-1 { height: 280px; } .about-photo-2 { height: 200px; } .garden-inner { grid-template-columns: 1fr; padding: 0 calc(var(--line) * 0.7); } .cta-section { padding: calc(var(--line) * 2) 0; } .cta-inner { padding: 0 calc(var(--line) * 0.7); } .footer-inner { padding: calc(var(--line)) calc(var(--line) * 0.7); flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .hero-headline { font-size: 2.1rem; } .nav .wm { font-size: 0.95rem; } }