/* ==========================================================================
Through Your Eyes — guest stylesheet
Surbhi & Rahul · wedding/assets/css/style.css
HOW THIS FILE IS ORGANISED (beginner friendly)
------------------------------------------------------------------------
1. Design tokens (:root) — the shared colours, fonts and sizes
2. Reset & page shell — sane defaults, safe-area padding
3. Base typography — headings, paragraphs, links
4. Small utilities — .visually-hidden, .eyebrow, .rule, .monogram
5. Steps & motion — the four stacked screens, fade + rise
6. Hero screen — #stepHero
7. Buttons — .btn / .btn-primary / .btn-ghost
8. Form fields — #guestName, #eventSelect
9. Drop zone — #dropZone, #pickBtn
10. Preview list — #previewList thumbnails
11. Selected count — #selCount
12. Error list — #formErrors
13. Progress screen — #stepUploading
14. Success screen — #stepDone
15. Footer & noscript
16. Focus rings & accessibility
17. Larger screens — 390px / 430px / 768px / 1100px
18. Reduced motion & short screens
RULES OF THE HOUSE: ivory ground, editorial serif display type, generous
whitespace, hairline rules, restrained gold. No gradients. No bright
colour. No emoji. Nothing ever scrolls sideways.
The fonts are loaded with a tag in index.php — never with @import.
========================================================================== */
/* ==========================================================================
1. DESIGN TOKENS
These custom properties are SHARED with admin/admin.css. Do not rename
them; other files depend on the exact spelling.
========================================================================== */
:root{
--ivory:#FBF8F3; --paper:#FFFFFF; --sand:#F4EEE4; --beige:#EDE4D7;
--champagne:#D9C4A0; --gold:#B08D57; --gold-soft:#C8AE84; --gold-deep:#8A6B3D;
--charcoal:#221F1C; --ink:#3E3833; --muted:#7A6F63; --line:#E6DCCD;
--danger:#9E4B3F; --ok:#5F7A5A;
--font-display:'Cormorant Garamond','Cormorant',Georgia,'Times New Roman',serif;
--font-sans:'Jost','Helvetica Neue',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
--r-sm:6px; --r-md:12px; --r-lg:20px;
--shadow-1:0 1px 2px rgba(34,31,28,.05), 0 8px 24px rgba(34,31,28,.06);
--shadow-2:0 2px 6px rgba(34,31,28,.08), 0 18px 48px rgba(34,31,28,.10);
--ease:cubic-bezier(.22,.61,.36,1);
--tap:48px;
/* Layout helpers used only by this guest stylesheet. */
--gutter:24px; /* side padding on the smallest phones */
--shell:520px; /* reading width of the page */
--speed:280ms; /* default transition length */
/* Always render light. iOS dark mode must NOT invert this page. */
color-scheme:light;
}
/* ==========================================================================
2. RESET & PAGE SHELL
========================================================================== */
*,
*::before,
*::after{
box-sizing:border-box;
}
html{
/* max-width + overflow-x guarantee there is never a sideways scrollbar. */
max-width:100%;
overflow-x:hidden;
background:var(--ivory);
color-scheme:light;
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}
/* index.php writes ; the class is listed here so it
resolves, and so admin pages can never pick these rules up by accident. */
body,
.guest-page{
max-width:100%;
overflow-x:hidden;
margin:0;
background:var(--ivory);
color:var(--ink);
font-family:var(--font-sans);
font-size:16px;
font-weight:300;
line-height:1.65;
letter-spacing:.005em;
/* Digits as digits (lining figures): Cormorant/serif old-style
figures elsewhere make a lone 1 look like a small I. Applied on
body so it inherits everywhere, including inside the serif headings. */
font-variant-numeric:lining-nums;
-webkit-font-feature-settings:"lnum" 1;
font-feature-settings:"lnum" 1;
overflow-wrap:break-word;
word-wrap:break-word;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
min-height:100vh;
min-height:100svh; /* iOS: the small viewport, so toolbars do not force a scroll */
}
/* Media never pushes the layout wider than the screen. */
img,
svg,
video,
canvas{
max-width:100%;
height:auto;
border:0;
}
/* Form controls inherit the page type and stay light in iOS dark mode. */
input,
select,
button,
textarea{
font:inherit;
color:inherit;
color-scheme:light;
max-width:100%;
}
button{
cursor:pointer;
}
button[disabled],
button:disabled{
cursor:default;
}
/* The JavaScript hides the inactive screens with the hidden attribute.
!important is needed because the id rules below set display:flex. */
.form-actions-secondary[hidden]{
display:none!important;
}
[hidden]{
display:none !important;
}
::selection{
background:var(--champagne);
color:var(--charcoal);
}
/* ---- The page shell -----------------------------------------------------
One narrow ivory column, centred, with safe-area aware padding so the
iPhone notch / home indicator never sits on top of the content.
Three elements share that column: , and