/* ========================================================================== RESET.CSS Project: Luxury Destination Wedding Videographer Author: Cyber Master Studio Description: Modern CSS Reset ========================================================================== */ /* ========================================================================== Box sizing ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* ========================================================================== Remove default margins ========================================================================== */ * { margin: 0; padding: 0; } /* ========================================================================== Base document ========================================================================== */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================================================================== Media ========================================================================== */ img, picture, svg, video, canvas { display: block; max-width: 100%; } img, picture { height: auto; } /* ========================================================================== Form elements ========================================================================== */ input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } textarea { resize: vertical; } /* ========================================================================== Links ========================================================================== */ a { color: inherit; text-decoration: none; } /* ========================================================================== Lists ========================================================================== */ ul, ol { list-style: none; } /* ========================================================================== Tables ========================================================================== */ table { border-collapse: collapse; border-spacing: 0; } /* ========================================================================== Headings ========================================================================== */ h1, h2, h3, h4, h5, h6 { font: inherit; } /* ========================================================================== Paragraphs ========================================================================== */ p { overflow-wrap: break-word; } /* ========================================================================== Text selection ========================================================================== */ ::selection { text-shadow: none; } /* ========================================================================== Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== VARIABLES.CSS Project: Luxury Destination Wedding Videographer Author: Cyber Master Studio Version: 1.0 Description: Global Design Tokens ========================================================================== */ :root { /* ====================================================================== Typography ====================================================================== */ --cms-font-serif: "Editors Note Regular", serif; --cms-font-sans-sub: "Open Sans Regular", sans-serif; --cms-font-sans-bot: "Open Sans Semi", sans-serif; --cms-font-sans: "Proxima Nova Regular", sans-serif; --cms-font-script: "Pinyon Script", cursive; --cms-font-light: 300; --cms-font-regular: 400; --cms-font-medium: 500; --cms-font-semibold: 600; } :root { /* ========================================================================== COLORS ========================================================================== */ --cms-color-primary: #ffffff; --cms-color-secondary: #000000; --cms-color-background: #fcfcfc; --cms-color-surface: #EEE9E9; --cms-color-heading: #211f20; --cms-color-text: #211f20; --cms-color-border: #211f20; --cms-color-accent: #696969; --cms-color-white:#ffffff; --cms-color-black:#000000; --cms-color-navigation: #fff; --cms-color-navigation-hover: #EEE9E9; --cms-color-navigation-scrolled: #211f20; --cms-color-button: #FFFFFF; --cms-color-button-hover: #D8C8B8; --cms-color-button-scrolled: #211f20; --cms-color-button-scrolled-hover: #8A6F5A; /* ========================================================================== TYPOGRAPHY ========================================================================== */ --cms-font-heading: ; --cms-font-body: ; /* ========================================================================== FONT WEIGHTS ========================================================================== */ --cms-font-light:300; --cms-font-regular:400; --cms-font-medium:500; --cms-font-semibold:600; --cms-font-bold:700; /* ========================================================================== FONT SIZES ========================================================================== */ --cms-text-xs: 10px; --cms-text-sm: 12px; --cms-text-base: 14px; --cms-text-lg: 16px; --cms-text-xl: 18px; --cms-text-2xl: 16px; --cms-text-3xl: 17px; --cms-text-4xl: 18px; --cms-text-5xl: 20px; --cms-text-6xl: 70px; /* ========================================================================== LINE HEIGHT ========================================================================== */ --cms-leading-none:1; --cms-leading-tight:1.2; --cms-leading-normal:1.5; --cms-leading-relaxed:1.8; /* ========================================================================== LETTER SPACING ========================================================================== */ --cms-tracking-tight: 1px; --cms-tracking-normal: 2px; --cms-tracking-wide: 3px; /* ========================================================================== LAYOUT ========================================================================== */ --cms-container: 1280px; --cms-container-wide: 1440px; --cms-container-narrow: 900px; --cms-container-padding: 24px; /* ========================================================================== HEADER ========================================================================== */ --cms-header-height: 110px; --cms-header-height-scrolled: 80px; --cms-navigation-gap: 40px; /* ========================================================================== SPACING SCALE ========================================================================== */ --cms-space-2xs:8px; --cms-space-xs:16px; --cms-space-sm:24px; --cms-space-md:32px; --cms-space-lg:48px; --cms-space-xl:64px; --cms-space-2xl:96px; --cms-space-3xl:128px; --cms-space-4xl:160px; /* ========================================================================== BORDER RADIUS ========================================================================== */ --cms-radius-sm: 10px; --cms-radius-md: 20px; --cms-radius-lg: 30px; /* ========================================================================== BORDERS ========================================================================== */ --cms-border-width:1px; /* ========================================================================== SHADOWS ========================================================================== */ --cms-shadow-sm: ; --cms-shadow-md: ; --cms-shadow-lg: ; /* ========================================================================== TRANSITIONS ========================================================================== */ --cms-transition-fast:150ms ease; --cms-transition-normal:250ms ease; --cms-transition-slow:450ms ease; /* ========================================================================== Z-INDEX ========================================================================== */ --cms-z-base:1; --cms-z-header:100; --cms-z-dropdown:200; --cms-z-overlay:300; --cms-z-modal:400; --cms-z-toast:500; /* ========================================================================== BREAKPOINTS ========================================================================== */ --cms-breakpoint-sm:576px; --cms-breakpoint-md:768px; --cms-breakpoint-lg:992px; --cms-breakpoint-xl:1200px; --cms-breakpoint-2xl:1440px; } /* ========================================================================== BASE.CSS Project: Luxury Destination Wedding Videographer Author: Cyber Master Studio Version: 1.0 Description: Global base styles ========================================================================== */ @font-face { font-family: "Editors Note Regular"; src: url("../fonts/editors-note-regular.woff") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans Regular"; src: url("../fonts/open-sans-regular.woff") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Open Sans Semi"; src: url("../fonts/open-sans-semi-bold.woff") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Proxima Nova Regular"; src: url("../fonts/proxima-nova-regular.woff") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Pinyon Script"; src: url("../fonts/pinyon-script-regular.woff") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* ========================================================================== HTML ========================================================================== */ html { font-size: 100%; } /* ========================================================================== Body ========================================================================== */ body { font-family: var(--cms-font-body); font-size: var(--cms-text-base); font-weight: var(--cms-font-regular); line-height: var(--cms-leading-normal); color: var(--cms-color-text); background-color: var(--cms-color-background); overflow-x: clip; } /* ========================================================================== Main ========================================================================== */ main { display: block; } /* ========================================================================== Images ========================================================================== */ img { display: block; max-width: 100%; height: auto; } /* ========================================================================== Videos ========================================================================== */ video { display: block; width: 100%; height: auto; } /* ========================================================================== Links ========================================================================== */ a { transition: color var(--cms-transition-fast), opacity var(--cms-transition-fast); } /* ========================================================================== Buttons ========================================================================== */ button { transition: background-color var(--cms-transition-fast), color var(--cms-transition-fast), border-color var(--cms-transition-fast); } /* ========================================================================== Headings ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--cms-font-heading); font-weight: var(--cms-font-regular); color: var(--cms-color-heading); line-height: var(--cms-leading-tight); text-wrap: balance; } /* ========================================================================== Paragraphs ========================================================================== */ p { text-wrap: pretty; } /* ========================================================================== Strong ========================================================================== */ strong { font-weight: var(--cms-font-semibold); } /* ========================================================================== Focus Visible ========================================================================== */ :focus-visible { outline: 2px solid var(--cms-color-accent); outline-offset: 4px; } /* ========================================================================== Selection ========================================================================== */ ::selection { background-color: var(--cms-color-accent); color: var(--cms-color-white); } /* ========================================================================== Logo ========================================================================== */ .site-header__logo { position: relative; display: block; } /* Ambos os logos */ .site-header__logo-image { display: block; width: 100%; height: auto; transition: opacity var(--cms-transition-fast); } /* Logo preto fica sobreposto ao branco */ .site-header__logo-image--black { position: absolute; inset: 0; opacity: 0; } /* ========================================================================== Scrolled ========================================================================== */ .site-header--scrolled .site-header__logo-image--white { opacity: 0; } .site-header--scrolled .site-header__logo-image--black { opacity: 1; } /* ========================================================================== LAYOUT.CSS Project: Luxury Destination Wedding Videographer Author: Cyber Master Studio Version: 1.0 Description: Global layout system ========================================================================== */ /* ========================================================================== Container ========================================================================== */ .container { width: min( 100% - (var(--cms-container-padding) * 2), var(--cms-container) ); margin-inline: auto; } /* ========================================================================== Wide Container ========================================================================== */ .container--wide { width: min( 100% - (var(--cms-container-padding) * 2), var(--cms-container-wide) ); margin-inline: auto; } /* ========================================================================== Narrow Container ========================================================================== */ .container--narrow { width: min( 100% - (var(--cms-container-padding) * 2), var(--cms-container-narrow) ); margin-inline: auto; } /* ========================================================================== Sections ========================================================================== */ .section { padding-block: var(--cms-space-3xl); } .section--small { padding-block: var(--cms-space-2xl); } .section--large { padding-block: var(--cms-space-4xl); } .section--flush-top { padding-top: 0; } .section--flush-bottom { padding-bottom: 0; } /* ========================================================================== Section Header ========================================================================== */ .section-header { margin-bottom: var(--cms-space-xl); } /* ========================================================================== Grid ========================================================================== */ .grid { display: grid; gap: var(--cms-space-lg); } .container{ width:min(100% - 48px,1280px); margin-inline:auto; }