/*! ------------------------------------------------ * Project Name: Rayo - Digital Agency & Personal Portfolio HTML Template * Project Description: Elevate your digital presence with Rayo - dynamic and stylish HTML template designed for creative agencies and personal brands. With modern layouts, smooth interactions and a polished aesthetic, Rayo template helps showcase projects, services and expertise with clarity and impact. * Tags: mix_design, resume, portfolio, personal page, cv, template, one page, responsive, html5, css3, creative, clean, agency, studio * Version: 1.0.0 * Last Update: August 2026 * Author: mix_design * Author URI: https://mixdesign.dev *//*! File name: loader.css * ------------------------------------------------ * * ------------------------------------------------ * Table of Contents * ------------------------------------------------ * 01. Loader Styles * ------------------------------------------------ * Table of Contents End * ------------------------------------------------ */:root{--_size: 1.8rem;--_font-default: "Funnel Sans", "Funnel Sans Fallback", sans-serif;--_font-accent: "Funnel Display", "Funnel Display Fallback", sans-serif;--_radius-s: 1rem;--_radius-m: 1.6rem;--_radius-pt-m: 1.6rem;--_radius-l: 3.8rem;--_radius-xl: 6rem;--_animspeed-fast: .1s;--_animspeed-medium: .3s;--_animspeed-slow: .6s;--_animbezier: cubic-bezier(.23, .65, .74, 1.09);--base--light: #FAF7F6;--base-rgb--light: 250, 247, 246;--base-tint--light: #FFFFFF;--base-shade--light: #e0dddb;--base-opp--light: #161616;--base-opp-tint--light: #1C1C1C;--accent--light: #9F8BE7;--accent-rgb--light: 159, 139, 231;--additional--light: #DDF160;--additional-rgb--light: 221, 241, 96;--neutral-transparent--light: rgba(255, 255, 255, .3);--st-bright--light: #161616;--st-medium--light: #7C7C7C;--st-muted--light: #E0DDDB;--st-opp-bright--light: #FFFFFF;--fw-regular--light: 400;--fw-medium--light: 600;--fw-semibold--light: 700;--fw-bold--light: 800;--fw-regular-opp--light: 300;--fw-medium-opp--light: 500;--t-bright--light: #161616;--t-medium--light: #303030;--t-muted--light: #585858;--t-muted-extra--light: #B2AEAD;--t-opp-bright--light: #FFFFFF;--t-opp-medium--light: #ACACAC;--t-opp-muted--light: #838383;--base--dark: #161616;--base-rgb--dark: 22, 22, 22;--base-tint--dark: #1C1C1C;--base-shade--dark: #0a0a0a;--base-opp--dark: #FAF7F6;--base-opp-tint--dark: #ffffff;--accent--dark: #DDF160;--accent-rgb--dark: 221, 241, 96;--additional--dark: #9F8BE7;--additional-rgb--dark: 159, 139, 231;--neutral-transparent--dark: rgba(0, 0, 0, .3);--st-bright--dark: #FFFFFF;--st-medium--dark: #646464;--st-muted--dark: #252525;--st-opp-bright--dark: #0f0f0f;--fw-regular--dark: 300;--fw-medium--dark: 500;--fw-semibold--dark: 600;--fw-bold--dark: 700;--fw-regular-opp--dark: 400;--fw-medium-opp--dark: 600;--t-bright--dark: #FFFFFF;--t-medium--dark: #ACACAC;--t-muted--dark: #838383;--t-muted-extra--dark: #535151;--t-opp-bright--dark: #161616;--t-opp-medium--dark: #303030;--t-opp-muted--dark: #969696;--pt-base: #FFFFFF;--pt-base-dark: #161616;--pt-t-light-bright: #FFFFFF;--pt-t-dark-bright: #161616;--pt-st-light-bright: #FFFFFF;--pt-st-dark-bright: #161616;--pt-purple-rgb: 159, 139, 231;--pt-purple-dark-rgb: 33, 10, 113;--nl-white: #ffffff;--nl-black: #000000}@media only screen and (min-width:768px){:root{--_radius-m: 2.6rem;--_radius-l: 5rem;--_radius-xl: 8rem}}@media only screen and (min-width:1200px){:root{--_radius-xl: 8rem}}@media(prefers-color-scheme:light){:root{--base: var(--base--light);--base-rgb: var(--base-rgb--light);--base-tint: var(--base-tint--light);--base-shade: var(--base-shade--light);--base-opp: var(--base-opp--light);--base-opp-tint: var(--base-opp-tint--light);--accent: var(--accent--light);--accent-rgb: var(--accent-rgb--light);--additional: var(--additional--light);--additional-rgb: var(--additional-rgb--light);--neutral-transparent: var(--neutral-transparent--light);--st-bright: var(--st-bright--light);--st-medium: var(--st-medium--light);--st-muted: var(--st-muted--light);--st-opp-bright: var(--st-opp-bright--light);--fw-regular: var(--fw-regular--light);--fw-medium: var(--fw-medium--light);--fw-semibold: var(--fw-semibold--light);--fw-bold: var(--fw-bold--light);--fw-regular-opp: var(--fw-regular-opp--light);--fw-medium-opp: var(--fw-medium-opp--light);--t-bright: var(--t-bright--light);--t-medium: var(--t-medium--light);--t-muted: var(--t-muted--light);--t-muted-extra: var(--t-muted-extra--light);--t-opp-bright: var(--t-opp-bright--light);--t-opp-medium: var(--t-opp-medium--light);--t-opp-muted: var(--t-opp-muted--light)}}@media(prefers-color-scheme:dark){:root{--base: var(--base--dark);--base-rgb: var(--base-rgb--dark);--base-tint: var(--base-tint--dark);--base-shade: var(--base-shade--dark);--base-opp: var(--base-opp--dark);--base-opp-tint: var(--base-opp-tint--dark);--accent: var(--accent--dark);--accent-rgb: var(--accent-rgb--dark);--additional: var(--additional--dark);--additional-rgb: var(--additional-rgb--dark);--neutral-transparent: var(--neutral-transparent--dark);--st-bright: var(--st-bright--dark);--st-medium: var(--st-medium--dark);--fw-semibold: var(--fw-semibold--dark);--st-muted: var(--st-muted--dark);--st-opp-bright: var(--st-opp-bright--dark);--fw-regular: var(--fw-regular--dark);--fw-medium: var(--fw-medium--dark);--fw-bold: var(--fw-bold--dark);--fw-regular-opp: var(--fw-regular-opp--dark);--fw-medium-opp: var(--fw-medium-opp--dark);--t-bright: var(--t-bright--dark);--t-medium: var(--t-medium--dark);--t-muted: var(--t-muted--dark);--t-muted-extra: var(--t-muted-extra--dark);--t-opp-bright: var(--t-opp-bright--dark);--t-opp-medium: var(--t-opp-medium--dark);--t-opp-muted: var(--t-opp-muted--dark)}}[color-scheme=light]{--base: var(--base--light);--base-rgb: var(--base-rgb--light);--base-tint: var(--base-tint--light);--base-shade: var(--base-shade--light);--base-opp: var(--base-opp--light);--base-opp-tint: var(--base-opp-tint--light);--accent: var(--accent--light);--accent-rgb: var(--accent-rgb--light);--additional: var(--additional--light);--additional-rgb: var(--additional-rgb--light);--neutral-transparent: var(--neutral-transparent--light);--st-bright: var(--st-bright--light);--st-medium: var(--st-medium--light);--st-muted: var(--st-muted--light);--st-opp-bright: var(--st-opp-bright--light);--fw-regular: var(--fw-regular--light);--fw-medium: var(--fw-medium--light);--fw-semibold: var(--fw-semibold--light);--fw-bold: var(--fw-bold--light);--fw-regular-opp: var(--fw-regular-opp--light);--fw-medium-opp: var(--fw-medium-opp--light);--t-bright: var(--t-bright--light);--t-medium: var(--t-medium--light);--t-muted: var(--t-muted--light);--t-muted-extra: var(--t-muted-extra--light);--t-opp-bright: var(--t-opp-bright--light);--t-opp-medium: var(--t-opp-medium--light);--t-opp-muted: var(--t-opp-muted--light)}[color-scheme=dark]{--base: var(--base--dark);--base-rgb: var(--base-rgb--dark);--base-tint: var(--base-tint--dark);--base-shade: var(--base-shade--dark);--base-opp: var(--base-opp--dark);--base-opp-tint: var(--base-opp-tint--dark);--accent: var(--accent--dark);--accent-rgb: var(--accent-rgb--dark);--additional: var(--additional--dark);--additional-rgb: var(--additional-rgb--dark);--neutral-transparent: var(--neutral-transparent--dark);--st-bright: var(--st-bright--dark);--st-medium: var(--st-medium--dark);--st-muted: var(--st-muted--dark);--st-opp-bright: var(--st-opp-bright--dark);--fw-regular: var(--fw-regular--dark);--fw-medium: var(--fw-medium--dark);--fw-semibold: var(--fw-semibold--dark);--fw-bold: var(--fw-bold--dark);--fw-regular-opp: var(--fw-regular-opp--dark);--fw-medium-opp: var(--fw-medium-opp--dark);--t-bright: var(--t-bright--dark);--t-medium: var(--t-medium--dark);--t-muted: var(--t-muted--dark);--t-muted-extra: var(--t-muted-extra--dark);--t-opp-bright: var(--t-opp-bright--dark);--t-opp-medium: var(--t-opp-medium--dark);--t-opp-muted: var(--t-opp-muted--dark)}.loader{position:fixed;inset:0;z-index:1000;will-change:opacity,transform}.loader.loaded{opacity:0;visibility:hidden;pointer-events:none}.loader__wrapper{position:absolute;top:0;width:100%;height:100%;background:var(--base);color:var(--t-bright);display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}.loader__content{position:absolute;inset:50% auto auto 50%;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translate(-50%) translateY(-50%);display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;z-index:2;color:var(--t-bright);overflow:hidden}.loader__count{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-moz-box-pack:end;-ms-flex-pack:end;justify-content:end;overflow:hidden;line-height:1}.loader__count span{display:-webkit-inline-box;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex;font:normal var(--fw-medium) 6rem/.9 var(--_font-accent);letter-spacing:-.06rem;color:var(--t-bright)}@media only screen and (min-width:768px){.loader__count span{font-size:8rem}}@media only screen and (min-width:1200px){.loader__count span{font-size:10rem}}@media only screen and (min-width:1600px){.loader__count span{font-size:12rem}}