/** * variables.css — design tokens for ICE GeneratePress Child. * * Single responsibility: define CSS custom properties (design tokens). * No selectors other than :root and a small set of contextual overrides. * * Tokens are overridable from the Customizer (see inc/helpers.php → * ice_gp_child_print_css_vars()). Customizer values are emitted inline * in via wp_head at priority 5, AFTER this file loads, so they * correctly win the cascade. * * @package ICE_GeneratePress_Child * @since 1.0.0 */ :root { /* ----- Color palette ----- */ --ice-primary: #151515; /* near-black */ --ice-accent: #d6b56e; /* signature gold */ --ice-accent-dark: #c2a259; /* hover state */ --ice-accent-light: #e5d0a1; /* button text on gold */ --ice-white: #ffffff; --ice-gray: #666666; --ice-gray-light: #999999; --ice-light: #f4f4f4; /* body background — soft gray (wpbeginner-style) */ --ice-body: #6e7676; /* body text */ --ice-title: #041b16; /* heading text */ --ice-border: #e7e7e7; --ice-content-bg: #ffffff; /* content box background — pure white */ --ice-content-border: #e7e7e7; /* content box border */ --ice-content-radius: 5px; /* content box border radius */ --ice-content-pad-y: 40px; /* content box vertical padding (inside card) */ --ice-content-pad-x: 24px; /* content box horizontal padding (inside card) */ --ice-page-pad-top: 25px; /* page top padding (gap between header and content card) */ --ice-page-pad-bottom: 64px; /* page bottom padding */ --ice-overlay: rgba(21, 21, 21, 0.55); --ice-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --ice-shadow: 0 4px 16px rgba(15, 23, 42, 0.08); --ice-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); --ice-shadow-sticky: 0 6px 20px rgba(15, 23, 42, 0.10); /* ----- Layout ----- */ --ice-container: 1364px; --ice-container-narrow: 860px; --ice-content-width: calc(100% - 2 * var(--ice-spacing-lg)); --ice-grid-gap: var(--ice-spacing-lg); /* ----- Spacing scale (8/16/24/32/48/64/80) ----- */ --ice-spacing-3xs: 4px; --ice-spacing-2xs: 8px; --ice-spacing-xs: 12px; --ice-spacing-sm: 16px; --ice-spacing-md: 24px; --ice-spacing-lg: 32px; --ice-spacing-xl: 48px; --ice-spacing-2xl: 64px; --ice-spacing-3xl: 80px; /* ----- Top bar ----- */ --ice-topbar-bg: var(--ice-primary); --ice-topbar-color: var(--ice-white); /* text color */ --ice-topbar-icon-color: var(--ice-accent); /* icon color (gold by default) */ --ice-topbar-height: 34px; --ice-topbar-fs: 12px; /* compact topbar font size */ /* ----- Header ----- */ --ice-header-bg: var(--ice-white); --ice-header-color: var(--ice-title); --ice-header-height: 84px; --ice-header-height-sticky: 64px; /* ----- Mobile Drawer (offcanvas) ----- */ --ice-drawer-bg: var(--ice-primary); /* drawer panel background (dark) */ --ice-drawer-color: rgba(255, 255, 255, 0.78); /* drawer text color */ --ice-drawer-title-color: var(--ice-white); /* drawer headings */ --ice-drawer-link-color: rgba(255, 255, 255, 0.78); /* drawer link color */ --ice-drawer-link-hover: var(--ice-accent); /* drawer link hover (gold) */ --ice-drawer-hover-bg: rgba(214, 181, 110, 0.08); /* subtle gold hover background */ --ice-drawer-active-bg: rgba(214, 181, 110, 0.12); /* active item background */ --ice-drawer-border-color: rgba(255, 255, 255, 0.08); /* drawer dividers */ --ice-drawer-overlay-blur: 3px; /* backdrop-filter blur on overlay */ --ice-shadow-drawer: -8px 0 32px rgba(0, 0, 0, 0.25); /* drawer edge shadow */ --ice-drawer-transition: 320ms cubic-bezier(0.4, 0, 0.2, 1); /* drawer slide timing */ /* ----- Footer ----- */ --ice-footer-bg: var(--ice-primary); --ice-footer-color: rgba(255, 255, 255, 0.78); --ice-footer-title-color: var(--ice-white); --ice-footer-link-color: rgba(255, 255, 255, 0.78); --ice-footer-link-hover: var(--ice-accent); --ice-footer-bottom-bg: rgba(0, 0, 0, 0.30); --ice-footer-title-underline-width: 28px; /* gold underline width below footer titles */ --ice-footer-title-underline-height: 2px; /* gold underline thickness */ --ice-footer-title-underline-color: var(--ice-accent); /* gold underline color */ --ice-footer-title-line-color: rgba(255, 255, 255, 0.12); /* thin grey line below title (extends beyond gold) */ /* ----- Typography ----- */ --ice-font-body: 'Archivo', sans-serif; --ice-font-heading: 'Archivo', sans-serif; --ice-font-mono: 'Archivo', sans-serif; --ice-fs-xs: 12px; --ice-fs-sm: 14px; --ice-fs-base: 16px; --ice-fs-md: 18px; --ice-fs-lg: 20px; --ice-fs-xl: 24px; --ice-fs-2xl: 28px; --ice-fs-3xl: 32px; --ice-fs-4xl: 40px; --ice-fs-5xl: 48px; --ice-fs-6xl: 60px; --ice-fs-7xl: 72px; --ice-fw-normal: 400; --ice-fw-medium: 500; --ice-fw-semibold: 600; --ice-fw-bold: 700; --ice-fw-extrabold: 800; --ice-fw-black: 900; --ice-lh-tight: 1.15; --ice-lh-snug: 1.3; --ice-lh-normal: 1.6; --ice-lh-relaxed: 1.75; --ice-ls-tight: -0.02em; --ice-ls-normal: 0; --ice-ls-wide: 0.04em; --ice-ls-wider: 0.08em; /* ----- Buttons ----- */ --ice-btn-radius: 999px; --ice-btn-radius-sm: 6px; --ice-btn-pad-y: 14px; --ice-btn-pad-x: 28px; --ice-btn-pad-y-sm: 9px; --ice-btn-pad-x-sm: 18px; --ice-btn-pad-y-lg: 18px; --ice-btn-pad-x-lg: 36px; --ice-btn-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1); /* ----- Motion ----- */ --ice-t-fast: 150ms ease; --ice-t-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --ice-t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* ----- Footer background image ----- */ --ice-footer-bg-image: url("https://media.ice.or.id/img/bg_ice.webp"); --ice-footer-overlay: rgba(21, 21, 21, 0.92); /* dark overlay color */ --ice-footer-overlay-color: ''; /* empty = use --ice-footer-overlay */ --ice-footer-overlay-opacity: 0.92; /* 0-1, applied to ::after layer */ --ice-footer-bg-size: auto; /* 'auto' for repeat pattern, 'cover' for full cover */ --ice-footer-bg-position: center center; --ice-footer-bg-repeat: repeat; /* 'repeat' for tile pattern, 'no-repeat' for single */ --ice-footer-bg-attachment: scroll; --ice-footer-top-border-width: 2px; /* gradient border thickness on top of footer */ --ice-footer-top-border-image: linear-gradient(90deg, transparent 0%, var(--ice-accent) 20%, var(--ice-accent-dark) 50%, var(--ice-accent) 80%, transparent 100%) 1; /* ----- Footer transitions (Elementor-style) ----- */ --overlay-transition: .3s; --border-transition: .3s; /* ----- z-index scale ----- */ --ice-z-base: 1; --ice-z-header: 100; --ice-z-sticky: 200; --ice-z-dropdown: 300; --ice-z-overlay: 400; --ice-z-offcanvas: 9999; --ice-z-search: 9998; --ice-z-modal: 10000; /* ----- Focus ring (WCAG AA) ----- */ --ice-focus-color: var(--ice-accent); --ice-focus-offset: 3px; --ice-focus-width: 3px; }