/* ========================================================================== VARIABLES.CSS — Design Tokens Extracted from Ananke WordPress Theme Source: /wordpress-theme/ananke/ananke/style.css, base.css, dark.css, skeleton-*.css, color.php, theme-options.txt This file is the SINGLE SOURCE OF TRUTH for all design values. style.css and all other custom CSS must reference these variables. ========================================================================== */ /* ========================================================================== @FONT-FACE — Self-hosted fonts from Ananke WordPress Theme ========================================================================== */ @font-face { font-family: 'OpenSans-Light-webfont'; src: url('../fonts/OpenSans-Light-webfont.eot'); src: url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Light-webfont.woff') format('woff'), url('../fonts/OpenSans-Light-webfont.ttf') format('truetype'), url('../fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Sifonn-Basic'; src: url('../fonts/Sifonn-Basic.eot'); src: url('../fonts/Sifonn-Basic.eot?#iefix') format('embedded-opentype'), url('../fonts/Sifonn-Basic.woff') format('woff'), url('../fonts/Sifonn-Basic.ttf') format('truetype'), url('../fonts/Sifonn-Basic.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Sifonn-Basic-Outline'; src: url('../fonts/Sifonn-Basic-Outline.eot'); src: url('../fonts/Sifonn-Basic-Outline.eot?#iefix') format('embedded-opentype'), url('../fonts/Sifonn-Basic-Outline.woff') format('woff'), url('../fonts/Sifonn-Basic-Outline.ttf') format('truetype'), url('../fonts/Sifonn-Basic-Outline.svg') format('svg'); font-weight: normal; font-style: normal; } :root { /* ========================================================================== 1. PRIMARY / ACCENT COLORS ========================================================================== */ --color-primary: #CFA144; /* Gold — THE brand color, applied everywhere via color.php */ --color-secondary-gold: #cbab82; /* Lighter gold — blog h6 links, search focus, calendar today */ --color-accent-red: #e74c3c; /* Flat red — base.css fallback (overridden by primary in most contexts) */ /* ========================================================================== 2. BACKGROUND COLORS (Light Theme) ========================================================================== */ --bg-body: #f2f2f2; --bg-section-white: #ffffff; --bg-section-alt: #f1f1f1; /* Services-offer items */ --bg-section-gray: #f2f2f2; /* Video sections, team, services */ --bg-nav: rgba(250, 250, 250, 0.9); --bg-nav-scrolled: rgba(250, 250, 250, 1); --bg-nav-dropdown: rgba(250, 250, 250, 0.95); --bg-input: #ffffff; --bg-dark-block: #292929; /* Portfolio label bg, fancybox btn bg */ --bg-submit: rgba(60, 60, 60, 0.85); --bg-submit-hover: rgba(60, 60, 60, 1); --bg-blog-card: rgba(255, 255, 255, 0.9); --bg-blog-card-hover: #ffffff; --bg-portfolio-mask: rgba(255, 255, 255, 0.7); --bg-portfolio-desc: rgba(0, 0, 0, 0.6); --bg-tooltip: rgba(0, 0, 0, 0.95); --bg-footer: #ffffff; /* Footer variant 1 */ --bg-footer-2: #323232; /* Footer variant 2 dark */ --bg-footer-backtop: #f2f2f2; --bg-footer-backtop-hover: #ffffff; --bg-preloader: #ffffff; --bg-btn-default: #363636; --bg-btn-default-hover: #292929; --bg-calendar-today: #cbab82; --bg-calendar-td: #f5f5f5; --bg-fancybox-skin: #f9f9f9; /* ========================================================================== 3. TEXT COLORS ========================================================================== */ --text-body: #404040; --text-heading: #101010; --text-nav: #000000; --text-nav-hover: var(--color-primary); --text-white: #ffffff; --text-muted: #706e6e; /* Portfolio filter default */ --text-muted-hover: #bdb3b3; /* Portfolio filter hover */ --text-blog-title: #414141; --text-blog-date: #212121; --text-blog-link: #292929; --text-contact-detail: #5b5b5b; --text-widget-link: #827b7d; --text-widget-link-hover: #615C5C; --text-btn-default: #dfdfdf; --text-contact-btn: #313131; --text-header-shadow: rgba(60, 60, 60, 0.08); --text-lead: #777777; --text-blockquote: #777777; --text-cite: #555555; /* ========================================================================== 4. BORDER COLORS ========================================================================== */ --border-hr: #323a3d; --border-contact-btn: #313131; --border-map-toggle: rgba(60, 60, 60, 0.1); --border-facts-counter: rgba(255, 255, 255, 0.4); --border-table: rgba(0, 0, 0, 0.1); --border-blockquote: var(--color-primary); /* ========================================================================== 5. FONT FAMILIES Ananke uses custom self-hosted fonts. For the new Bootstrap site, we use closest available equivalents or self-host the originals. Original Ananke fonts: Headings: Sifonn-Basic (custom, all-caps display font) Body: OpenSans-Light-webfont UI/Chrome: Lato, sans-serif Decorative: Lato italic (replaced Satisfy cursive) Forms: Open Sans, sans-serif Blog body: Montserrat Icons: FontAwesome 4.x ========================================================================== */ --font-heading: 'Sifonn-Basic', sans-serif; --font-heading-outline: 'Sifonn-Basic-Outline', sans-serif; --font-body: 'Open Sans', sans-serif; /* Light weight (300) primary */ --font-ui: 'Lato', sans-serif; /* Nav, metadata, buttons, captions */ --font-decorative: 'Lato', sans-serif; /* Hero subtitle, CTA links (italic) */ --font-input: 'Open Sans', sans-serif; /* Form inputs, textarea */ --font-blog-single: 'Montserrat', 'Helvetica Neue', sans-serif; --font-icon: 'FontAwesome'; /* ========================================================================== 6. FONT SIZES ========================================================================== */ --fs-body: 14px; --fs-h1: 38px; --fs-h2: 36px; --fs-h3: 32px; --fs-h4: 28px; --fs-h5: 18px; --fs-h6: 16px; --fs-hero-title: 60px; /* .big-text */ --fs-hero-shadow: 70px; /* .header-shadow-text */ --fs-hero-subtitle: 20px; /* .small-text */ --fs-nav: 12px; --fs-small: 12px; --fs-xs: 10px; /* Tooltips, scroll-btn, ajax-form */ --fs-lead: 21px; --fs-blockquote: 17px; --fs-btn-default: 16px; --fs-btn-contact: 12px; --fs-btn-submit: 13px; --fs-blog-link: 14px; --fs-blog-single-title: 24px; --fs-service-icon: 60px; /* FA icon in services */ --fs-counter: 60px; /* Facts counter number */ --fs-contact-span: 18px; --fs-contact-icon: 20px; --fs-contact-detail: 15px; --fs-contact-h6: 18px; --fs-button-map: 16px; --fs-footer: 12px; --fs-footer-icon: 16px; --fs-footer-backtop: 22px; --fs-footer-2-span: 16px; --fs-preloader-text: 36px; --fs-slider-arrow: 32px; --fs-fancybox-btn: 22px; --fs-expander-close: 30px; --fs-plans-link: 18px; --fs-portfolio-label: 12px; --fs-logo-text: 26px; /* ========================================================================== 7. FONT WEIGHTS ========================================================================== */ --fw-thin: 100; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ========================================================================== 8. LINE HEIGHTS ========================================================================== */ --lh-body: 22px; --lh-h1: 38px; --lh-h2: 36px; --lh-h3: 32px; --lh-h4: 28px; --lh-h5: 18px; --lh-h6: 16px; --lh-hero-title: 60px; --lh-hero-shadow: 70px; --lh-hero-subtitle: 20px; --lh-lead: 27px; --lh-blockquote: 24px; --lh-counter: 120px; --lh-footer: 22px; --lh-backtop: 40px; --lh-submit: 43px; --lh-fancybox-btn: 42px; --lh-list: 18px; --lh-blog-h3: 36px; --lh-team-desc: 22px; --lh-plans-text: 22px; --lh-social-footer: 25px; --lh-preloader-text: 40px; /* ========================================================================== 9. LETTER SPACING ========================================================================== */ --ls-tight: 1px; /* Blog metadata, contact button, blog link */ --ls-normal: 2px; /* Footer span, google map, blog subtitle */ --ls-wide: 3px; /* Preloader text, contact detail */ /* ========================================================================== 10. SPACING — Section Padding ========================================================================== */ --section-pad: 60px; /* Standard section top/bottom */ --section-pad-lg: 100px; /* Parallax counter sections */ --section-pad-xl: 150px; /* Large parallax separators */ --section-pad-blog: 70px; /* Blog post wrapper */ --section-pad-footer2-top: 80px; /* Footer variant 2 */ --section-pad-footer2-bot: 30px; /* ========================================================================== 11. SPACING — Grid System ========================================================================== */ --grid-gutter: 10px; /* Skeleton 960/1200 column margin */ --grid-gutter-lg: 25px; /* Skeleton 1320 column margin */ --grid-row-gap: 20px; /* Row margin-bottom (960/1200) */ --grid-row-gap-lg: 50px; /* Row margin-bottom (1320) */ /* ========================================================================== 12. CONTAINER WIDTHS Ananke uses Skeleton grid, not Bootstrap. Default layout is 960px. We map to Bootstrap container overrides. ========================================================================== */ --container-xs: 220px; /* < 320px */ --container-sm: 300px; /* 320-479px */ --container-mobile: 420px; /* 480-767px */ --container-tablet: 768px; /* 768-959px */ --container-960: 960px; /* Default theme layout */ --container-1200: 1200px; /* Large layout option */ --container-1320: 1320px; /* Extra-large layout option */ /* ========================================================================== 13. BORDER RADIUS ========================================================================== */ --radius-xs: 1px; --radius-sm: 3px; /* Footer back-top corners */ --radius-md: 5px; /* Services-offer, plans-offer, preloader logo */ --radius-lg: 10px; /* Page overlay loader */ --radius-pill: 20px; /* Flex-control paging dots */ --radius-circle: 50%; /* Avatars, counters, preloader */ --radius-fancybox: 4px; /* Fancybox skin */ --radius-fancybox-title: 15px; /* ========================================================================== 14. BOX SHADOWS ========================================================================== */ --shadow-input-focus: 0 0 10px rgba(60, 60, 60, 0.2); --shadow-nav-dropdown: 0 0 15px rgba(0, 0, 0, 0.1); --shadow-general: 0 0 20px rgba(0, 0, 0, 0.3); --shadow-tooltip: 0 0 25px rgba(0, 0, 0, 0.5); --shadow-team-img: 0 8px 6px -6px rgba(60, 60, 60, 0.3); --shadow-footer-top: 0 -5px 15px -5px #000; --shadow-footer-top-hover: 0 -5px 5px -5px #000; --shadow-fancybox: 0 10px 25px rgba(0, 0, 0, 0.5); --shadow-portfolio-label: 1px 1px 1px rgba(0,0,0,.1), -7px 0 5px -3px rgba(0,0,0,.5), inset 0 0 5px rgba(0,0,0,.04); --shadow-facts-inset: inset 0 0 30px rgba(60, 60, 60, 0.7); --shadow-flex-dot: inset 0 0 3px rgba(0, 0, 0, 0.3); /* ========================================================================== 15. TRANSITIONS ========================================================================== */ --trans-fast: all 0.2s linear; --trans-base: all 0.3s linear; /* THE dominant transition */ --trans-base-ease: all 0.3s ease; --trans-base-ease-in-out: all 0.3s ease-in-out; --trans-medium: all 0.35s ease-in-out; --trans-slow: all 0.5s ease-out; /* Navbar header scroll */ --trans-slider: all 1s ease; /* Flex-viewport */ --trans-transform: transform 0.3s; /* CL-effect text slide */ /* ========================================================================== 16. LOGO DIMENSIONS ========================================================================== */ --logo-w: 146px; --logo-h: 80px; --logo-w-scroll: 116px; /* Shrunk after scroll */ --logo-h-scroll: 60px; --logo-w-mobile: 80px; --logo-h-mobile: 50px; --logo-margin-top: 10px; --logo-footer-w: 125px; --logo-footer-h: 50px; /* ========================================================================== 17. Z-INDEX SCALE ========================================================================== */ --z-base: 2; --z-nav: 500; --z-portfolio-desc: 1000; --z-logo: 10000; --z-preloader: 9999999; --z-tooltip: 100000; --z-fancybox-overlay: 8010; --z-fancybox-wrap: 8020; --z-fancybox-opened: 8030; /* ========================================================================== 18. COMPONENT SIZES ========================================================================== */ --counter-size: 120px; --backtop-size: 40px; --fancybox-btn-size: 42px; --slider-arrow-size: 40px; --slider-dot-size: 11px; --map-zoom-size: 32px; --team-line-w: 50px; --team-line-h: 1px; --avatar-size: 70px; --social-icon-w: 24px; --social-footer-w: 25px; --portfolio-max-w: 960px; /* ========================================================================== 19. DARK THEME OVERRIDES These values replace the light theme equivalents when the dark variant is active. Apply via a .dark-theme class on or :root. ========================================================================== */ /* --bg-body-dark: #323232; --bg-nav-dark: rgba(60, 60, 60, 0.9); --bg-nav-scrolled-dark: rgba(60, 60, 60, 1); --bg-nav-dropdown-dark: #222222; --bg-section-dark: #323232; --bg-footer-dark: #292929; --bg-blog-card-dark: rgba(40, 40, 40, 0.9); --bg-portfolio-mask-dark: rgba(10, 10, 10, 0.7); --bg-preloader-dark: #000000; --text-body-dark: #a6a6a6; --text-heading-dark: #ffffff; --text-nav-dark: #ffffff; --text-blog-title-dark: #fafafa; --text-blog-date-dark: #cccccc; --text-widget-link-dark: #fafafa; --text-contact-detail-dark: #818181; */ }