/* ============================================ APEX AGENCY — GLOBAL DESIGN SYSTEM Version 1.0 All visual decisions live here as variables. Change here → changes everywhere. ============================================ */ /* === GOOGLE FONTS IMPORT === */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap'); /* === ROOT VARIABLES (Design Tokens) === */ :root { /* --- Colors --- */ --color-bg-primary: #0A0F1E; --color-bg-secondary: #0D1B3E; --color-bg-card: #111827; --color-blue-accent: #1A2D6B; --color-gold: #C9A84C; --color-gold-warm: #E8C87A; --color-gold-pale: #F5E6C3; --color-white: #FFFFFF; --color-off-white: #F0EDE8; --color-text-muted: #8892A4; --color-border: rgba(201, 168, 76, 0.15); --color-overlay: rgba(10, 15, 30, 0.85); /* --- Typography --- */ --font-heading: 'Cormorant Garamond', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; --font-display: 'DM Serif Display', Georgia, serif; /* --- Font Sizes (fluid, scales with viewport) --- */ --text-xs: clamp(11px, 1.2vw, 13px); --text-sm: clamp(13px, 1.4vw, 15px); --text-base: clamp(15px, 1.6vw, 18px); --text-lead: clamp(18px, 2vw, 24px); --text-h3: clamp(24px, 3vw, 40px); --text-h2: clamp(36px, 5vw, 64px); --text-h1: clamp(52px, 8vw, 120px); /* --- Spacing (8px base grid) --- */ --space-xs: 8px; --space-sm: 16px; --space-md: 32px; --space-lg: 64px; --space-xl: 96px; --space-xxl: 160px; /* --- Layout --- */ --max-width: 1280px; --max-width-text: 720px; --gutter: clamp(24px, 5vw, 80px); /* --- Borders & Radius --- */ --border-thin: 1px solid var(--color-border); --border-gold: 1px solid var(--color-gold); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; /* --- Transitions --- */ --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 0.4s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.7s cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* --- Shadows --- */ --shadow-gold: 0 0 40px rgba(201, 168, 76, 0.12); --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.4); --shadow-nav: 0 4px 30px rgba(0, 0, 0, 0.5); /* --- Z-Index Scale --- */ --z-base: 1; --z-card: 10; --z-nav: 100; --z-overlay: 200; --z-modal: 300; } /* ============================================ GLOBAL RESETS & BASE STYLES ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: auto; /* GSAP handles smooth scroll */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { background-color: var(--color-bg-primary); color: var(--color-off-white); font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: 1.7; overflow-x: hidden; } /* Remove WordPress default margins on blocks */ .wp-block-group, .wp-block-cover, .wp-block-columns { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* ============================================ TYPOGRAPHY — GLOBAL ============================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-white); } h1 { font-size: var(--text-h1); font-weight: 300; } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-h3); } p { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.8; color: var(--color-off-white); max-width: var(--max-width-text); } /* Gold accent text — add class "text-gold" to any element */ .text-gold { color: var(--color-gold); } /* Italic serif callout — add class "text-italic" */ .text-italic { font-family: var(--font-heading); font-style: italic; font-weight: 300; color: var(--color-gold-pale); } /* Small caps label style */ .label-text { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gold); } /* ============================================ LAYOUT UTILITIES ============================================ */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); } .section-padding { padding-block: var(--space-xxl); } .section-padding--sm { padding-block: var(--space-xl); } /* Grid utility */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ============================================ LINKS & BUTTONS ============================================ */ a { color: var(--color-gold); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-gold-warm); } /* Primary Button */ .btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 36px; background: transparent; border: var(--border-gold); color: var(--color-gold); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; position: relative; overflow: hidden; transition: color var(--transition-base); } /* The fill effect on hover */ .btn-primary::before { content: ''; position: absolute; inset: 0; background: var(--color-gold); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-base); z-index: -1; } .btn-primary:hover { color: var(--color-bg-primary); } .btn-primary:hover::before { transform: scaleX(1); } /* Gold underline link style */ .link-gold { position: relative; color: var(--color-off-white); font-size: var(--text-sm); letter-spacing: 0.1em; text-transform: uppercase; } .link-gold::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background: var(--color-gold); transform: scaleX(0); transform-origin: right; transition: transform var(--transition-base); } .link-gold:hover::after { transform: scaleX(1); transform-origin: left; } /* ============================================ NAVIGATION — GLOBAL ============================================ */ .wp-block-navigation { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); padding: 24px var(--gutter); display: flex; align-items: center; justify-content: space-between; background: transparent; transition: background var(--transition-base), padding var(--transition-base), backdrop-filter var(--transition-base); } /* Nav scrolled state — JS adds this class */ .nav-scrolled { background: rgba(10, 15, 30, 0.92) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 16px var(--gutter) !important; box-shadow: var(--shadow-nav); } /* ============================================ GOLD LINE DECORATORS These thin gold lines appear throughout design ============================================ */ .gold-line { width: 60px; height: 1px; background: var(--color-gold); display: block; margin-bottom: var(--space-md); } .gold-line--center { margin-inline: auto; } /* ============================================ SECTION DIVIDERS ============================================ */ .section-divider { width: 100%; height: 1px; background: linear-gradient( to right, transparent, var(--color-gold) 20%, var(--color-gold) 80%, transparent ); opacity: 0.3; margin: 0; } /* ============================================ REVEAL ANIMATION TARGETS GSAP will control these — they start hidden ============================================ */ .reveal-up { opacity: 0; transform: translateY(60px); } .reveal-fade { opacity: 0; } .reveal-left { opacity: 0; transform: translateX(-60px); } .reveal-right { opacity: 0; transform: translateX(60px); } /* ============================================ SCROLLBAR STYLING ============================================ */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--color-bg-primary); } ::-webkit-scrollbar-thumb { background: var(--color-gold); border-radius: 2px; } /* ============================================ SELECTION COLOR ============================================ */ ::selection { background: var(--color-gold); color: var(--color-bg-primary); }

Blog

Sorry, but nothing was found. Please try a search with different keywords.