/* ============================================================================= THESEXTONS.UK — SHARED DESIGN LANGUAGE main.css This file defines the entire visual identity for all apps at thesextons.uk. Every colour, font, spacing value, and component style lives here. To use on any page, add this to the : (Use href="styles/main.css" on the root index.html) ============================================================================= */ /* ============================================================================= 1. DESIGN TOKENS — CSS CUSTOM PROPERTIES These are the single source of truth for all visual values. Change a value here and it updates everywhere. ============================================================================= */ :root { /* --- Colour Palette --- */ /* Background layers — dark forest greens */ --color-bg: #152A18; /* Main page background */ --color-bg-card: #1E3828; /* Card / surface background */ --color-bg-card-rgb: 30,56,40; /* Same as above but as RGB for rgba() use */ /* Border */ --color-border: #2A4530; /* Subtle card borders */ /* Text */ --color-text: #EEF5EE; /* Primary text — warm off-white */ --color-text-muted: #7AAB7D; /* Secondary text — mid green */ /* Accent colours — assign to categories as apps are built */ --color-pink: #FF3D8A; /* Sport */ --color-lime: #AAED3B; /* Hobby / nature */ --color-gold: #FFD020; /* Work */ --color-coral: #FF6B35; /* Family (reserved) */ /* --- Typography --- */ --font-display: 'Playfair Display', Georgia, serif; /* Headings — warm, characterful */ --font-body: 'DM Sans', system-ui, sans-serif; /* Body — clean, readable on mobile */ /* --- Spacing --- */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* --- Radii --- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 28px; /* Used for phone-shaped containers */ /* --- Transitions --- */ --transition: 200ms ease; } /* ============================================================================= 2. RESET & BASE STYLES ============================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* Prevent font scaling in landscape on iOS */ -webkit-text-size-adjust: 100%; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.5; min-height: 100vh; /* Prevent horizontal scroll on mobile */ overflow-x: hidden; } a { color: inherit; text-decoration: none; } /* Import Google Fonts — Playfair Display for headings, DM Sans for body */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&family=DM+Sans:wght@400;500&display=swap'); /* ============================================================================= 3. LAYOUT The main page wrapper. Content is centred and capped at a comfortable mobile-first width. Padding ensures content never touches screen edges. ============================================================================= */ .page { position: relative; min-height: 100vh; padding: var(--space-xl) var(--space-md) var(--space-xl); /* Cap width for larger screens — this is a mobile-first app */ max-width: 480px; margin: 0 auto; } /* The canvas for particle animation sits behind all content */ .page canvas { position: fixed; /* fixed so it covers the whole viewport as you scroll */ inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; /* never intercept taps */ } /* All direct children of .page sit above the canvas */ .page > *:not(canvas) { position: relative; z-index: 1; } /* ============================================================================= 4. TYPOGRAPHY ============================================================================= */ /* Page greeting — small uppercase label above the main title */ .greeting { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--color-text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-sm); } /* Main page title */ .page-title { font-family: var(--font-display); font-size: 48px; font-weight: 500; color: var(--color-text); line-height: 1.1; margin-bottom: var(--space-xl); } /* Accent word within a title — picks up lime green */ .page-title .accent { color: var(--color-lime); } /* Section label — small coloured heading above a group of cards */ .section-label { font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-sm); margin-top: var(--space-lg); padding-left: 2px; } /* Section label colour variants — add more as categories grow */ .section-label--pink { color: var(--color-pink); } .section-label--lime { color: var(--color-lime); } .section-label--gold { color: var(--color-gold); } .section-label--coral { color: var(--color-coral); } /* ============================================================================= 5. CARDS The primary navigation / content component. Each app link is a card. Cards use a semi-transparent background so the particle animation shows through subtly. ============================================================================= */ .card { display: flex; align-items: center; gap: var(--space-md); background: rgba(var(--color-bg-card-rgb), 0.85); border-radius: var(--radius-md); border: 0.5px solid var(--color-border); padding: 14px var(--space-md); margin-bottom: var(--space-sm); /* Blur the particles slightly behind cards for depth */ backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); /* Smooth hover transition */ transition: border-color var(--transition), transform var(--transition); /* Make the whole card tappable */ cursor: pointer; text-decoration: none; color: inherit; /* Ensure cards are always above canvas */ position: relative; z-index: 1; } /* Lift card slightly on hover/tap */ .card:hover, .card:focus-visible { border-color: var(--color-border); transform: translateY(-1px); } /* Remove tap highlight on iOS */ .card:active { -webkit-tap-highlight-color: transparent; transform: scale(0.99); } /* --- Card Icon --- */ /* Coloured square icon on the left of each card */ .card__icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; /* Never let the icon shrink */ } /* Icon colour variants — background is a transparent tint of the accent */ .card__icon--pink { background: rgba(255, 61, 138, 0.18); color: var(--color-pink); } .card__icon--lime { background: rgba(170, 237, 59, 0.15); color: var(--color-lime); } .card__icon--gold { background: rgba(255, 208, 32, 0.15); color: var(--color-gold); } .card__icon--coral { background: rgba(255, 107, 53, 0.15); color: var(--color-coral); } /* --- Card Body --- */ /* Text content in the middle of the card */ .card__body { flex: 1; min-width: 0; /* Allow text to truncate rather than overflow */ } .card__title { font-size: 17px; font-weight: 500; color: var(--color-text); margin-bottom: 2px; } .card__subtitle { font-size: 14px; color: var(--color-text-muted); } /* --- Card Arrow --- */ /* Chevron on the right of each card */ .card__arrow { color: var(--color-border); font-size: 16px; flex-shrink: 0; /* Nudge arrow right on hover */ transition: transform var(--transition), color var(--transition); } .card:hover .card__arrow { transform: translateX(2px); color: var(--color-text-muted); } /* ============================================================================= 6. BOTTOM NAV BAR Used on pages with multiple sections. Hidden on single-section pages. ============================================================================= */ .bottom-nav { display: flex; justify-content: space-around; margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 0.5px solid var(--color-border); } .bottom-nav__item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--color-border); font-size: 10px; cursor: pointer; transition: color var(--transition); /* Minimum tap target size per Apple HIG */ min-width: 44px; min-height: 44px; justify-content: center; } .bottom-nav__item i { font-size: 20px; } .bottom-nav__item--active { color: var(--color-lime); } .bottom-nav__item:hover { color: var(--color-text-muted); } /* ============================================================================= 7. UTILITY CLASSES ============================================================================= */ /* Visually hidden but accessible to screen readers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Spacer — adds top margin above an element */ .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); }