/* ============================================================================
OVERCROSS - the base every funnel page stands on.
============================================================================
THE LADDER. 600 / 900 / 1200, and no other width.
Base styles are the phone. A wider screen ADDS through `min-width`:
.cp-grid { display: grid; gap: 16px; } -- the phone
@media (min-width: 600px) { .cp-grid { ... } } -- tablet
@media (min-width: 900px) { .cp-grid { ... } } -- laptop
@media (min-width: 1200px) { .cp-grid { ... } } -- desktop
A `max-width` media query is the old direction and does not belong in the
funnel: it means the section was born desktop-wide and narrowed afterwards
by whoever noticed, which is how this funnel reached 26 off-ladder widths
decided file by file.
CSS cannot parameterise a media query, so the three numbers cannot be
enforced from here. `php artisan css:ladder` counts what is left, per
file and per funnel page; `--file=` prints the lines to convert.
Why this file: it is the only sheet linked by BOTH shells on ALL FOUR
funnel pages, so it is the one place a rule reaches every phone. Keep it
small and keep it first in the : everything here must be beatable by
a component sheet loaded after it.
Concept: docs/design/mobile-concept.md, characteristics 2, 3 and 11.
========================================================================= */
/* --- 1. Reset ------------------------------------------------------------
Byte-identical to the head of app_r_min.css and css/m/app_r.css, which is
why moving it here changes nothing: it was already loaded three times. */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow-y: auto;
overflow-x: hidden;
/* iOS inflates text in landscape without this, which no breakpoint sees. */
-webkit-text-size-adjust: 100%;
}
body {
font-family: 'Roboto', sans-serif;
overflow: visible;
width: 100%; /* width, never 100vw: a vw includes the scrollbar */
}
/* --- 2. Fonts ------------------------------------------------------------ */
@font-face {
font-family: 'Sansation';
src: url('/fonts/sansation/Sansation-Light.woff') format('woff'),
url('/fonts/sansation/Sansation-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Cracked';
src: url('/fonts/oc/cracked.woff2') format('woff2');
font-display: swap;
}
@font-face {
font-family: 'Vineritc';
src: url('/fonts/vineritc.ttf') format('truetype');
font-display: swap;
}
.cracked {
font-family: Cracked;
color: #EE7D00 !important;
font-size: 34px;
position: relative;
z-index: 2;
}
.btn.btn-primary {
background-color: #EE7D00;
}
/* --- 3. Tokens -----------------------------------------------------------
The house colours and the rhythm of characteristic 4, in one place. Every
component sheet keeps its own prefixed set (--cp-*, --cat-*, --ri-*, --tm-*)
and is welcome to go on doing so - these exist so a NEW section does not
have to invent the orange again, and so the ladder is readable from JS
(getComputedStyle(document.documentElement).getPropertyValue('--oc-bp-md')). */
:root {
/* The three rungs, for the JS that has to agree with the CSS. */
--oc-bp-sm: 600px;
--oc-bp-md: 900px;
--oc-bp-lg: 1200px;
/* Colours. Orange is the primary CTA and nothing else. */
--oc-orange: #FF6A00;
--oc-ink: #111214;
--oc-milk: #EDE3D5;
--oc-white: #FFFFFF;
/* The section rhythm: eyebrow, H2, lead. */
--oc-eyebrow-size: 10px;
--oc-eyebrow-track: .18em;
--oc-h2-size: clamp(24px, 5.5vw, 30px);
--oc-lead-size: 15px;
--oc-read-size: 17px;
--oc-read-line: 1.7;
/* The phone's only horizontal measurement. */
--oc-gutter: 20px;
/* Touch: 48px targets with 8px between them. */
--oc-touch: 48px;
--oc-touch-gap: 8px;
}
@media (min-width: 900px) {
:root {
--oc-gutter: 32px;
}
}
/* --- 4. Media ------------------------------------------------------------
No element may be wider than the phone. Loaded first, so any component
sheet that wants a fixed height still wins. `height: auto` is the companion
of the width/height attributes ResponsivePicture now writes on every funnel
: the attributes reserve the box, this keeps the aspect ratio while the
box shrinks. */
img,
svg,
video,
canvas,
iframe {
max-width: 100%;
}
img {
height: auto;
}
/* --- 5. Touch and motion -------------------------------------------------
Characteristic 11. Sitewide fallbacks: a component sheet that already has
its own :focus-visible or its own reduced-motion block is untouched, because
this file is loaded before it. */
:focus-visible {
outline: 2px solid var(--oc-orange);
outline-offset: 2px;
}
/* A tap target that opts in. Not global: forcing 48px on every