/* ========================================================================== 3D VR Studio — core stylesheet Palette derived from the logo: glass-cyan highlight, brand blue core, near-black wordmark, cool glass greys. Light is the logo's native ground. Add data-theme="dark" on for the dark variant (needs a knockout logo). ========================================================================== */ :root { /* Surfaces — white, with the cool grey of the glass cube */ --shadow: #FFFFFF; /* page */ --shadow-deep: #EDF1F5; /* recessed: frames, inputs */ --panel: #F4F7FA; /* raised band */ --panel-lift: #E9EEF4; --rule: #DCE3EA; --rule-bright: #C3CEDA; /* Text — the wordmark black, stepping down to glass grey */ --key: #0A0A0A; --key-soft: #38444F; --dim: #64737F; --dimmer: #8B98A4; /* Brand blues, sampled from the mark */ --amber: #0C7DB6; /* core brand blue — primary action (AA on white) */ --amber-deep: #095D89; /* hover / pressed */ --amber-wash: rgba(12, 125, 182, 0.07); --rim: #6DC4EF; /* glass highlight — accents, never text */ /* Type */ --face: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif; /* Scale — 1.333 perfect fourth off 17px */ --t-xs: 0.78rem; --t-sm: 0.9rem; --t-base: 1.0625rem; --t-md: 1.32rem; --t-lg: 1.86rem; --t-xl: 2.6rem; --t-2xl: 3.7rem; --t-3xl: 5.2rem; /* Rhythm */ --gut: 1.5rem; --bay: 6.5rem; --max: 1240px; --measure: 66ch; } /* Dark variant. Requires a white-wordmark version of the logo. */ :root[data-theme="dark"] { --shadow: #0E1419; --shadow-deep: #090E12; --panel: #161E26; --panel-lift: #1D2730; --rule: #24303B; --rule-bright: #33434F; --key: #F2F6F9; --key-soft: #C2CDD6; --dim: #8FA0AE; --dimmer: #667886; --amber: #4FB3E8; --amber-deep: #7CCAF0; --amber-wash: rgba(79, 179, 232, 0.10); --rim: #6DC4EF; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--shadow); color: var(--key-soft); font-family: var(--face); font-size: var(--t-base); font-weight: 400; line-height: 1.65; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } /* -------------------------------------------------------------------------- Typography One family. Contrast comes from width and weight, not from a second face. -------------------------------------------------------------------------- */ h1, h2, h3, h4 { color: var(--key); font-weight: 800; font-stretch: 125%; /* Archivo Expanded */ line-height: 1.02; letter-spacing: -0.025em; margin: 0 0 0.6em; text-wrap: balance; } h1 { font-size: clamp(2.6rem, 7.2vw, var(--t-3xl)); } h2 { font-size: clamp(2rem, 4.6vw, var(--t-2xl)); } h3 { font-size: clamp(1.35rem, 2.4vw, var(--t-lg)); font-stretch: 110%; letter-spacing: -0.018em; } h4 { font-size: var(--t-md); font-stretch: 100%; font-weight: 700; letter-spacing: -0.01em; } p { margin: 0 0 1.15em; max-width: var(--measure); } p:last-child { margin-bottom: 0; } .lede { font-size: clamp(1.15rem, 2vw, var(--t-md)); line-height: 1.5; color: var(--key-soft); font-weight: 400; } a { color: var(--key); text-decoration-color: var(--rule-bright); text-underline-offset: 0.22em; } a:hover { text-decoration-color: var(--amber); } :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; } .skip { position: absolute; left: -9999px; background: var(--amber); color: #FFFFFF; padding: 0.7rem 1.1rem; font-weight: 700; z-index: 200; } .skip:focus { left: 1rem; top: 1rem; } /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ .wrap { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; } .bay { padding-block: var(--bay); } .bay--tight { padding-block: 4rem; } .bay--lift { background: var(--panel); } .rule-top { border-top: 1px solid var(--rule); } .stack > * + * { margin-top: 1.15rem; } .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- Navigation -------------------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--shadow) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); } .nav__inner { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; display: flex; align-items: center; gap: 2rem; height: 84px; } .nav__mark { display: flex; align-items: center; text-decoration: none; margin-right: auto; flex: 0 0 auto; } .nav__mark .mark { display: block; width: auto; max-width: 100%; } .nav__mark--foot { margin: 0 0 1.1rem; display: inline-flex; } .nav__mark--foot .mark { height: 52px !important; } @media (max-width: 480px) { .nav__mark .mark { height: 32px !important; } } .nav__links { display: flex; gap: 1.75rem; align-items: center; } .nav__links a { color: var(--dim); text-decoration: none; font-size: var(--t-sm); font-weight: 500; transition: color 0.15s; } .nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--key); } /* .nav__links a out-specifies .btn — restate button colours here. */ .nav__links a.btn--key { color: #FFFFFF; } .nav__links a.btn--key:hover { color: #FFFFFF; } .nav__links a.btn--ghost { color: var(--key); } .nav__toggle { display: none; background: none; border: 1px solid var(--rule-bright); color: var(--key); border-radius: 3px; padding: 0.45rem 0.7rem; font: inherit; font-size: var(--t-sm); cursor: pointer; } @media (max-width: 820px) { .nav__toggle { display: block; } .nav__links { display: none; position: absolute; inset-inline: 0; top: 84px; flex-direction: column; align-items: stretch; gap: 0; background: var(--panel); border-bottom: 1px solid var(--rule); padding: 0.5rem 1.25rem 1.25rem; } .nav__links[data-open="true"] { display: flex; } .nav__links a { padding: 0.85rem 0; border-bottom: 1px solid var(--rule); } .nav__links .btn { margin-top: 1rem; text-align: center; } } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-block; font: inherit; font-weight: 700; font-size: var(--t-sm); padding: 0.82rem 1.5rem; border-radius: 3px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; } .btn--key { background: var(--amber); color: #FFFFFF; border-color: var(--amber); } .btn--key:hover { background: var(--amber-deep); border-color: var(--amber-deep); } .btn--ghost { background: transparent; color: var(--key); border-color: var(--rule-bright); } .btn--ghost:hover { border-color: var(--key-soft); background: rgba(255,255,255,0.03); } .btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; } /* -------------------------------------------------------------------------- Hero — the one bold moment. Wireframe strokes draw in, then the shaded surfaces light up. -------------------------------------------------------------------------- */ .hero { position: relative; padding-block: clamp(3.5rem, 8vw, 6.5rem) var(--bay); overflow: hidden; } /* Key light falls from upper right, matching the render's own lighting */ .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 78% 18%, var(--amber-wash), transparent 62%); pointer-events: none; } .hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; } @media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } .hero__art { order: -1; } } .hero h1 { margin-bottom: 0.42em; } .hero .lede { max-width: 46ch; margin-bottom: 2.1rem; } .hero__art { position: relative; } .hero__art svg { width: 100%; height: auto; display: block; } /* Wireframe pass */ .wf { fill: none; stroke: var(--rim); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1200; stroke-dashoffset: 1200; opacity: 0.85; animation: draw 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards, wf-out 0.9s ease-out 1.75s forwards; } /* Shaded pass */ .sf { opacity: 0; animation: shade 1.1s ease-out 1.55s forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes wf-out { to { opacity: 0.16; } } @keyframes shade { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .wf { stroke-dashoffset: 0; opacity: 0.16; animation: none; } .sf { opacity: 1; animation: none; } } /* -------------------------------------------------------------------------- Spec table — capabilities as data, not as cards -------------------------------------------------------------------------- */ .spec { width: 100%; border-collapse: collapse; text-align: left; } .spec caption { text-align: left; color: var(--dim); font-size: var(--t-sm); padding-bottom: 1rem; } .spec th, .spec td { padding: 1.35rem 1.25rem 1.35rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; } .spec thead th { color: var(--dimmer); font-size: var(--t-xs); font-weight: 600; font-stretch: 100%; letter-spacing: 0.04em; padding-bottom: 0.7rem; border-bottom-color: var(--rule-bright); } .spec tbody th { color: var(--key); font-size: var(--t-md); font-weight: 700; font-stretch: 110%; letter-spacing: -0.012em; width: 30%; } .spec td { color: var(--dim); font-size: var(--t-sm); } .spec td:first-of-type { color: var(--key-soft); font-size: var(--t-base); max-width: 46ch; } .spec tbody tr:last-child th, .spec tbody tr:last-child td { border-bottom: none; } @media (max-width: 780px) { .spec, .spec tbody, .spec tr, .spec td, .spec th { display: block; } .spec thead { display: none; } .spec tbody tr { border-bottom: 1px solid var(--rule); padding-block: 1.5rem; } .spec tbody tr:last-child { border-bottom: none; } .spec th, .spec td { border: none; padding: 0 0 0.5rem; width: auto; max-width: none; } .spec td[data-label]::before { content: attr(data-label) " · "; color: var(--dimmer); } } /* -------------------------------------------------------------------------- Pricing — one continuous table. The recommended column is lit, not badged. -------------------------------------------------------------------------- */ .tiers { overflow-x: auto; } .tiers table { width: 100%; border-collapse: collapse; min-width: 700px; } .tiers th, .tiers td { padding: 1rem 1.15rem; border-bottom: 1px solid var(--rule); text-align: left; } .tiers thead th { border-bottom: 1px solid var(--rule-bright); vertical-align: bottom; } .tiers .col-feature { width: 34%; color: var(--key-soft); font-weight: 400; font-size: var(--t-sm); } .tiers .col-feature small { display: block; color: var(--dimmer); font-size: var(--t-xs); line-height: 1.45; } .tier-name { display: block; color: var(--key); font-size: var(--t-md); font-weight: 800; font-stretch: 115%; letter-spacing: -0.015em; line-height: 1.1; } .tier-price { display: block; color: var(--key); font-size: var(--t-lg); font-weight: 700; font-stretch: 100%; letter-spacing: -0.02em; margin-top: 0.35rem; } .tier-note { display: block; color: var(--dim); font-size: var(--t-xs); margin-top: 0.4rem; font-weight: 400; } /* The key light picks out the recommended tier */ .lit { background: linear-gradient(180deg, var(--amber-wash), rgba(255,174,59,0.02)); } thead .lit { border-top: 2px solid var(--amber); } thead .lit .tier-name { color: var(--amber); } .yes { color: var(--amber); font-weight: 700; } .no { color: var(--dimmer); } .val { color: var(--key-soft); font-size: var(--t-sm); } /* -------------------------------------------------------------------------- Work grid -------------------------------------------------------------------------- */ .grid-work { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .piece { display: block; text-decoration: none; background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; transition: border-color 0.18s; } .piece:hover { border-color: var(--rule-bright); } .piece__frame { aspect-ratio: 4 / 3; background: radial-gradient(60% 70% at 50% 30%, rgba(255,174,59,0.05), transparent 70%), var(--shadow-deep); display: grid; place-items: center; border-bottom: 1px solid var(--rule); } .piece__frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .piece__slot { color: var(--dimmer); font-size: var(--t-xs); } .piece__body { padding: 1.1rem 1.25rem 1.35rem; } .piece__body h3 { font-size: var(--t-md); margin-bottom: 0.3rem; } .piece__body p { color: var(--dim); font-size: var(--t-sm); margin: 0; } /* -------------------------------------------------------------------------- Process — genuinely sequential, so numbering is warranted -------------------------------------------------------------------------- */ .phases { counter-reset: phase; display: grid; gap: 0; } .phase { counter-increment: phase; display: grid; grid-template-columns: 5rem minmax(0, 1fr) 11rem; gap: 1.5rem; padding-block: 2.1rem; border-bottom: 1px solid var(--rule); align-items: start; } .phase:last-child { border-bottom: none; } .phase::before { content: counter(phase, decimal-leading-zero); color: var(--amber); font-size: var(--t-md); font-weight: 700; font-stretch: 100%; line-height: 1.2; } .phase h3 { margin-bottom: 0.4rem; } .phase p { margin: 0; color: var(--dim); font-size: var(--t-sm); } .phase__span { color: var(--dim); font-size: var(--t-sm); text-align: right; } @media (max-width: 760px) { .phase { grid-template-columns: 3.2rem minmax(0, 1fr); gap: 1rem; } .phase__span { grid-column: 2; text-align: left; } } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .field { display: block; margin-bottom: 1.35rem; } .field > span { display: block; color: var(--key-soft); font-size: var(--t-sm); font-weight: 600; margin-bottom: 0.45rem; } .field input, .field select, .field textarea { width: 100%; background: var(--shadow-deep); border: 1px solid var(--rule-bright); border-radius: 3px; color: var(--key); font: inherit; font-size: var(--t-base); padding: 0.78rem 0.9rem; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--amber); outline: none; box-shadow: 0 0 0 3px var(--amber-wash); } .field textarea { resize: vertical; min-height: 8rem; } .field-note { color: var(--dimmer); font-size: var(--t-xs); margin-top: 0.4rem; } .form-msg { padding: 0.9rem 1.1rem; border-radius: 3px; font-size: var(--t-sm); margin-bottom: 1.25rem; } .form-msg--err { background: rgba(255,120,120,0.08); border: 1px solid rgba(255,120,120,0.3); color: #FFB0B0; } .form-msg--ok { background: var(--amber-wash); border: 1px solid var(--amber-deep); color: var(--amber); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .foot { background: var(--shadow-deep); border-top: 1px solid var(--rule); padding-block: 3.5rem 2.5rem; } .foot__cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem; margin-bottom: 3rem; } @media (max-width: 800px) { .foot__cols { grid-template-columns: 1fr 1fr; gap: 2rem; } } .foot h4 { color: var(--dimmer); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; margin-bottom: 0.9rem; } .foot ul { list-style: none; margin: 0; padding: 0; } .foot li { margin-bottom: 0.55rem; } .foot a { color: var(--dim); text-decoration: none; font-size: var(--t-sm); } .foot a:hover { color: var(--key); } .foot__legal { border-top: 1px solid var(--rule); padding-top: 1.75rem; color: var(--dimmer); font-size: var(--t-xs); line-height: 1.6; } .foot__legal p { max-width: 78ch; margin-bottom: 0.75rem; } /* Utilities */ .eyebrow { color: var(--amber); font-size: var(--t-sm); font-weight: 700; margin-bottom: 0.9rem; } .dim { color: var(--dim); } .center-measure { max-width: 62ch; } /* Dark: the accent lightens, so button text must invert to keep contrast. */ :root[data-theme="dark"] .btn--key, :root[data-theme="dark"] .nav__links a.btn--key, :root[data-theme="dark"] .nav__links a.btn--key:hover, :root[data-theme="dark"] .skip { color: #08131A; }