and sets the host slot's `data-frame` to "square" | "circle" | "rectangle". The bordered shape comes from the rules below. The nav slot is always rendered bare (no .Nuv-mark-frame wrapper) so the header brand bar never grows or borders the mark. */ [data-Nuv-mark]:has(.Nuv-mark-caption) { display: flex; flex-direction: column; align-items: center; justify-content: center; } .Nuv-mark-frame { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; } .Nuv-mark-frame svg { width: 100%; height: 100%; display: block; } [data-frame="square"] .Nuv-mark-frame { border: 1px solid currentColor; padding: 12%; aspect-ratio: 1; } [data-frame="circle"] .Nuv-mark-frame { border: 1px solid currentColor; border-radius: 50%; padding: 14%; aspect-ratio: 1; } [data-frame="rectangle"] .Nuv-mark-frame { border: 1px solid currentColor; padding: 10% 20%; } /* When the rectangle frame contains a caption inside it, switch to column flex so the SVG sits above the caption with both centered within the bordered box. Padding tightens a touch to make room. */ .Nuv-mark-frame.Nuv-mark-frame-with-inside-caption { flex-direction: column; gap: 14px; padding: 9% 14%; } .Nuv-mark-frame.Nuv-mark-frame-with-inside-caption > svg { flex: 0 1 auto; width: auto; height: auto; max-width: 100%; max-height: 75%; min-height: 0; } .Nuv-mark-caption { display: block; margin-top: 14px; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(14px, 2vw, 22px); letter-spacing: 0.04em; color: currentColor; text-align: center; line-height: 1.1; } .Nuv-mark-caption.Nuv-mark-caption-inside { margin-top: 0; font-size: clamp(12px, 1.6vw, 18px); } /* When the active variant is a self-contained lockup (wordmark, stacked), suppress the separate HTML wordmark inside the hero so we don't double-print "Nuvana Medical". */ [data-active-mark-kind="lockup"] .hero-wordmark { display: none; } [data-active-mark-kind="lockup"] [data-Nuv-mark="hero"] { width: clamp(260px, 50vw, 460px); height: auto; aspect-ratio: var(--Nuv-mark-aspect, 1); } /* Hero-mark sizing for icon vs lockup variants. The base .hero-mark rule keeps icons square; lockups use their declared aspect via inline style set by app.js after applyActiveNuvMark runs. */ [data-Nuv-mark="hero"][data-mark-kind="lockup"] { width: clamp(260px, 50vw, 460px); height: auto; } [data-Nuv-mark="hero"][data-mark-kind="lockup"] svg { width: 100%; height: auto; } /* ============================================================ NAVIGATION ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); transition: background 0.4s ease, border-color 0.4s ease; } .nav-bar { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; gap: 24px; flex-wrap: nowrap; } .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .brand-svg { height: 38px; width: auto; color: var(--Nuv-mark-color); overflow: visible; display: block; } /* When the active variant is a lockup (wordmark / stacked) the brand SVG itself supplies the full Nuvana Medical lettering, so the adjacent .brand-name HTML text is hidden to avoid duplication. */ [data-active-mark-kind="lockup"] .brand .brand-name { display: none; } [data-active-mark-kind="lockup"] .brand .brand-svg { height: 44px; } .brand-name { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: 0.04em; color: var(--ink); } .nav-links { display: flex; list-style: none; gap: 36px; margin: 0 auto; } .nav-links a { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 400; color: var(--ink); padding: 8px 0; border-bottom: 1px solid transparent; transition: border-color 0.25s ease, color 0.25s ease; } .nav-links a:hover, .nav-links a.active { border-bottom-color: var(--accent); color: var(--accent-deep); } .nav-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; flex-wrap: nowrap; min-width: 0; } /* ---- dark/light theme toggle ---- Derives the dark surfaces from the palette's own --p-ink/--p-paper so each palette has a distinct dark variant. Accents (--accent, --accent-deep) are unchanged. */ html.dark-mode { --bg: var(--p-ink) !important; --paper: color-mix(in srgb, var(--p-ink) 86%, white 14%) !important; --line: color-mix(in srgb, var(--p-ink) 72%, white 28%) !important; --ink: var(--p-paper) !important; --muted: color-mix(in srgb, var(--p-paper) 60%, transparent) !important; } .theme-toggle { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 6px 14px 7px; cursor: pointer; line-height: 1.2; transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .theme-toggle:hover { color: var(--ink); border-color: var(--ink); } .theme-toggle[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); } /* ---- mobile hamburger (visible <=880px) ---- */ .nav-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 42px; height: 38px; background: transparent; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; padding: 0; transition: border-color 0.25s ease; } .nav-hamburger:hover { border-color: var(--ink); } .nav-hamburger span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform 0.25s ease, opacity 0.25s ease; } .nav-mobile-open .nav-hamburger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .nav-mobile-open .nav-hamburger span:nth-child(2) { opacity: 0; } .nav-mobile-open .nav-hamburger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } /* ============================================================ BRAND STUDIO DRAWER Slide-out panel with palette + typeface + weight + italic. Any page can open it from the nav. Persists to Nuv_* localStorage keys so choices propagate everywhere. ============================================================ */ .brand-drawer-toggle { background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; display: flex; align-items: center; gap: 0; height: 38px; transition: border-color 0.25s ease, background 0.25s ease; } .brand-drawer-toggle:hover { border-color: var(--ink); } .brand-drawer-toggle .swatch-dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--paper); margin-left: -5px; } .brand-drawer-toggle .swatch-dot:first-child { margin-left: 0; } .brand-drawer-overlay { position: fixed; inset: 0; background: rgba(33, 40, 43, 0.32); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 199; } .brand-drawer-overlay.open { opacity: 1; pointer-events: auto; } .brand-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 100vw; background: var(--paper); border-left: 1px solid var(--line); box-shadow: -10px 0 40px rgba(33, 40, 43, 0.12); transform: translateX(100%); transition: transform 0.3s ease; z-index: 200; overflow-y: auto; padding: 0; } .brand-drawer.open { transform: translateX(0); } .brand-drawer-head { position: sticky; top: 0; background: var(--paper); padding: 22px 26px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; z-index: 1; } .brand-drawer-head h3 { font-family: var(--font-display); font-style: italic; font-size: 22px; font-weight: 400; color: var(--ink); } .brand-drawer-close { background: transparent; border: none; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; transition: color 0.2s ease; } .brand-drawer-close:hover { color: var(--ink); } .brand-drawer-section { padding: 22px 26px; border-bottom: 1px solid var(--line); } .brand-drawer-section:last-child { border-bottom: none; } .brand-drawer-section .eyebrow { margin-bottom: 14px; } /* ---- mark grid (inside drawer) ---- Compact 2-column grid of variant tiles. Each tile shows a small preview that picks up the active palette color via currentColor. */ .bd-mark-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; list-style: none; margin: 0; padding: 0; } .bd-mark { background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 14px 10px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .bd-mark:hover { border-color: var(--ink); } .bd-mark.active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); } .bd-mark .bd-mark-preview { width: 64px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--Nuv-mark-color); } .bd-mark .bd-mark-preview svg { max-width: 100%; max-height: 100%; display: block; } .bd-mark .bd-mark-name { font-family: var(--font-body); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1.2; } /* ---- compact pill list (used by Frame + Caption drawer rows) ---- */ .bd-pill-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .bd-pill { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .bd-pill:hover { border-color: var(--ink); } .bd-pill.active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); } .bd-pill-color { display: inline-flex; align-items: center; gap: 8px; padding-left: 8px; } .bd-pill-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line); flex-shrink: 0; } /* ---- palette grid (inside drawer) ---- */ .bd-palette-list { display: grid; grid-template-columns: 1fr; gap: 6px; list-style: none; margin: 0; padding: 0; } .bd-palette { display: flex; align-items: center; gap: 14px; width: 100%; background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 9px 14px; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; text-align: left; font-family: var(--font-body); } .bd-palette:hover { border-color: var(--ink); } .bd-palette.active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); } .bd-palette .dots { display: flex; flex-shrink: 0; } .bd-palette .dots span { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--paper); margin-left: -7px; } .bd-palette .dots span:first-child { margin-left: 0; } .bd-palette .pname { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } /* ---- font list (inside drawer) ---- */ .bd-font-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .bd-font-list li { display: flex; } .bd-font { background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 7px 12px; cursor: pointer; color: var(--ink); font-size: 15px; font-weight: 300; line-height: 1.2; text-align: center; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .bd-font:hover { border-color: var(--ink); } .bd-font.active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); } .bd-font .fo-tag { display: block; font-size: 7px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-top: 2px; font-weight: 400; font-family: var(--font-body); } /* ---- style row (weight + italic) ---- */ .bd-style-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; } .bd-field { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .bd-select { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 7px 10px; cursor: pointer; } .bd-italic { cursor: pointer; } .bd-italic input { margin-right: 6px; vertical-align: middle; } .bd-reset { width: 100%; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 10px; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .bd-reset:hover { color: var(--ink); border-color: var(--ink); } @media (max-width: 880px) { .brand-drawer { width: 100vw; } } /* ============================================================ BUTTONS / CTAs ============================================================ */ .btn { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 400; padding: 14px 28px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease; display: inline-block; text-align: center; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--paper); } .btn-accent { background: var(--accent); color: var(--paper); border-color: var(--accent); } .btn-accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: calc(100vh - 78px); display: flex; align-items: center; justify-content: center; text-align: center; padding: 80px 32px 100px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse at 20% 30%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 55% ), radial-gradient( ellipse at 80% 70%, color-mix(in srgb, var(--accent-deep) 28%, transparent), transparent 55% ); pointer-events: none; } .hero-content { position: relative; max-width: 760px; display: flex; flex-direction: column; align-items: center; gap: 28px; } .hero-lockup { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: nowrap; } .hero-mark { width: 130px; height: 130px; /* Use the same var as every other logo render site so the mark visibly tracks both palette changes and the Brand Studio's Logo Color picker. (Was var(--ink) - which in dark mode is near-white and barely shifts between palettes, making it look like the hero logo wasn't picking up the theme.) */ color: var(--Nuv-mark-color); flex-shrink: 0; } .hero-mark svg { width: 100%; height: 100%; display: block; } .hero-wordmark { font-family: var(--font-display); font-size: clamp(40px, 6vw, 64px); font-weight: 300; letter-spacing: 0.04em; color: var(--ink); line-height: 1; white-space: nowrap; } .hero-wordmark .hero-page { display: block; font-style: italic; font-size: 0.55em; color: var(--accent-deep); letter-spacing: 0.06em; margin-top: 6px; } .hero-tagline { font-size: 11px; letter-spacing: 0.55em; text-transform: uppercase; color: var(--muted); } .hero-sub { font-size: 15px; color: var(--muted); max-width: 540px; line-height: 1.8; } @media (max-width: 640px) { .hero-lockup { flex-direction: column; gap: 18px; } .hero-mark { width: 96px; height: 96px; } } /* ============================================================ SECTION: GENERIC ============================================================ */ .section-head { text-align: center; margin-bottom: 64px; max-width: 640px; margin-left: auto; margin-right: auto; } .section-head h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 400; color: var(--ink); font-style: italic; } .section-head p { margin-top: 18px; color: var(--muted); font-size: 15px; line-height: 1.8; } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--paper); color: var(--muted); border-top: 1px solid var(--line); padding: 56px 0 32px; } .site-footer .brand-name { color: var(--ink); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 11px; color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; } .footer-nav { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; } .footer-nav a { color: var(--muted); transition: color 0.2s ease; } .footer-nav a:hover { color: var(--ink); } /* ============================================================ UTILITIES ============================================================ */ .text-center { text-align: center; } .mb-sm { margin-bottom: 16px; } .mb-md { margin-bottom: 32px; } .mb-lg { margin-bottom: 56px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 880px) { section { padding: 64px 0; } /* ---- mobile nav drawer ---- .nav-bar allows wrap so the .nav-links drawer (flex-basis: 100%) can drop below the brand+actions row. Brand and actions themselves stay on a single row because their children scale down to fit. */ .nav-bar { position: relative; flex-wrap: wrap; gap: 12px; } .nav-hamburger { display: flex; } .nav-links { order: 99; display: none; flex-basis: 100%; flex-direction: column; gap: 0; margin: 12px -32px 0; padding: 0 32px; background: var(--paper); border-top: 1px solid var(--line); } .nav-mobile-open .nav-links { display: flex; } .nav-links li { border-bottom: 1px solid var(--line); } .nav-links li:last-child { border-bottom: none; } .nav-links a { display: block; padding: 18px 0; font-size: 12px; } /* ---- scaled-down header controls so brand + actions never wrap ---- */ .nav-actions { gap: 8px; } .brand-svg { width: 36px; height: 36px; } .theme-toggle { font-size: 9px; letter-spacing: 0.18em; padding: 5px 10px 6px; } .brand-drawer-toggle { height: 32px; padding: 4px 8px; } .brand-drawer-toggle .swatch-dot { width: 11px; height: 11px; } .nav-hamburger { width: 36px; height: 32px; } } @media (max-width: 480px) { .nav-bar { padding: 12px 20px; gap: 8px; } .brand-name { font-size: 18px; } .container, .container-narrow { padding: 0 20px; } /* ---- tighter scale at phone widths ---- */ .nav-actions { gap: 6px; } .brand-svg { width: 30px; height: 30px; } .theme-toggle { font-size: 8px; letter-spacing: 0.14em; padding: 4px 7px 5px; } .brand-drawer-toggle { height: 28px; padding: 3px 6px; } .brand-drawer-toggle .swatch-dot { width: 9px; height: 9px; border-width: 1.5px; } .nav-hamburger { width: 32px; height: 28px; } .nav-links a { padding: 14px 0; } .nav-links { margin: 12px -20px 0; padding: 0 20px; } }