/* === style.css === */ /* Theme Name: Architekt Theme Theme URI: http://www.dessign.net/architekttheme/ Description: Architekt Theme for WordPress is stylish, customizable, simple, and readable. Perfect for any illustrator or graphic designer. Version: 1.7 Author: Marios Lublinski Author URI: http://www.dessign.net Tags: 2 column theme, clean */ /** Global **/ * { margin: 0; padding: 0; } body { font-family: arial, verdana, georgia; font-size: 12px; background-color: #FFFFFF; color: #c7c7c7; } h2,p { margin: 10px 0; } a { color: #A1A1A1; text-decoration: none; } a:hover { text-decoration:underline; } .left { float: left; } img { border: none; } /** Header **/ #header { } .logo { float: left; margin-top: 15px; } /** Sidebar **/ /** Footer **/ #footer { background-color: #fff; padding: 5px 40px 0 0; color: #838383; font-size: 11px; text-align: right; margin-top: 15px; margin-bottom: 10px; } /* === foundation.css === */ /* Foundation v2.2 http://foundation.zurb.com */ /* Artfully Masterminded by ZURB */ /* -------------------------------------------------- Table of Contents ----------------------------------------------------- :: Reset & Standards :: Links :: Lists :: Tables :: Misc */ /* -------------------------------------------------- :: Global Reset & Standards -------------------------------------------------- */ /* Eric Meyer's CSS Reset http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, h2, p, a, img, s, strong, i, center, footer, header { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; } html { font-size: 62.5%; } /* HTML5 display-role reset for older browsers */ footer, header { display: block; } body { line-height: 1; } body { background: #fff; font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px; line-height: 18px; color: #555; position: relative; -webkit-font-smoothing: antialiased; } /* _FONTS ----------------------------------------------------------------------------- */ @font-face { font-family: 'Gotham'; src: url('../fonts/gotham-m.woff2') format('woff2'), url('../fonts/gotham-m.woff') format('woff'); font-display: swap; } /* -------------------------------------------------- :: 12th CSS -------------------------------------------------- */ a:hover {text-decoration: none;} #header {width: 100%; height: 140px; background-color: #000; position: fixed; top: 0; z-index: 200;} .logo {width: 45px; height: 60px; z-index: 20; margin: 35px auto; background: url(../images/vladimir_logo2.png) 50% 50% no-repeat;} .intro {color: #606060; font: 18px/26px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; text-align: center; padding: 40px 0 50px 0;} .quirk {color: #999; font: 14px/20px "Gotham", Helvetica, Arial, sans-serif; font-weight: 400; text-align: center; padding: 30px; margin: 20px 0 80px 0; border: 1px solid #eee;} .NEVERtitle {color: #777; font: 16px/24px "Gotham", Helvetica, Arial, sans-serif; font-weight: 400; text-align: center; padding: 0 0 55px 0; margin: 0; letter-spacing: 7px;} .connecttitle {color: #777; font: 16px/24px "Gotham", Helvetica, Arial, sans-serif; font-weight: 400; text-align: center; padding: 60px 0 30px 0; margin: 0; letter-spacing: 7px;} .C-des, .C-cre, .C-dev{ -webkit-transition: all 0.2s ease-in; /* Saf3.2+, Chrome */ -moz-transition: all 0.2s ease-in; /* FF4+ */ -ms-transition: all 0.2s ease-in; /* IE10? */ -o-transition: all 0.2s ease-in; /* Opera 10.5+ */ transition: all 0.2s ease-in; } .C-des, .C-cre, .C-dev { width: 140px; height: 140px; display: block; margin: 0 auto; border-radius: 70px; } .C-title {width: 100%; font: 16px/24px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; margin: 40px 0 20px 0; text-align: center;} #footer {background-color: #f9f9f9; padding: 0; border-top: 1px solid #f1f1f1; margin: 0;} #bottom {background: #000 url('../images/tiny_arrow.png') 50% -1px no-repeat; padding: 30px 0 30px 0; margin: 0; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; text-align: center; color: #444; } .connectext {padding: 50px 0 60px 0; text-align: center;} .connect {width: 100%; font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; margin: 0; text-align: center;} .facebook a {width: 40px; height: 40px; margin: 0 auto; -webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px; display: block; background: #d9d9d9 url('../images/connect/facebook.png') 50% 50% no-repeat; -webkit-transition: all 0.2s ease-in; /* Saf3.2+, Chrome */ -moz-transition: all 0.2s ease-in; /* FF4+ */ -ms-transition: all 0.2s ease-in; /* IE10? */ -o-transition: all 0.2s ease-in; /* Opera 10.5+ */ transition: all 0.2s ease-in; } .facebook a:hover { width: 40px; height: 40px; margin: 0 auto; -webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px; display: block; background-color: #243f76;} .instagram a {width: 40px; height: 40px; margin: 0 auto; -webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px; display: block; background: #d9d9d9 url('../images/connect/instagram.png') 50% 50% no-repeat; -webkit-transition: all 0.2s ease-in; /* Saf3.2+, Chrome */ -moz-transition: all 0.2s ease-in; /* FF4+ */ -ms-transition: all 0.2s ease-in; /* IE10? */ -o-transition: all 0.2s ease-in; /* Opera 10.5+ */ transition: all 0.2s ease-in; } .instagram a:hover { width: 40px; height: 40px; margin: 0 auto; -webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px; display: block; background-color: #333; } .twitter a {width: 40px; height: 40px; margin: 0 auto; -webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px; display: block; background: #d9d9d9 url('../images/connect/twitter.png') 50% 50% no-repeat;-webkit-transition: all 0.2s ease-in; /* Saf3.2+, Chrome */-moz-transition: all 0.2s ease-in; /* FF4+ */-ms-transition: all 0.2s ease-in; /* IE10? */-o-transition: all 0.2s ease-in; /* Opera 10.5+ */transition: all 0.2s ease-in;} .twitter a:hover {width: 40px; height: 40px; margin: 0 auto; -webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px; display: block; background-color: #33ccff;} .mail a {width: 40px; height: 40px; margin: 0 auto; -webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px; display: block; background: #d9d9d9 url('../images/connect/mail.png') 50% 50% no-repeat;-webkit-transition: all 0.2s ease-in; /* Saf3.2+, Chrome */-moz-transition: all 0.2s ease-in; /* FF4+ */-ms-transition: all 0.2s ease-in; /* IE10? */-o-transition: all 0.2s ease-in; /* Opera 10.5+ */transition: all 0.2s ease-in;} .mail a:hover {width: 40px; height: 40px; margin: 0 auto; -webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px; display: block; background-color: #fb6f14;} .neverslide {width: 100%; margin-bottom: 60px;} ::-moz-selection { background: #ccffcc; color: #161616; text-shadow: none; } ::selection { background: #ccffcc; color: #161616; text-shadow: none; } /* -------------------------------------------------- :: Links -------------------------------------------------- */ a { color: #2a85e8; text-decoration: none; line-height: inherit; } a:hover { color: #11639d; } a:focus { color: #cc4714; outline: none; } p a, p a:visited { line-height: inherit; } /* -------------------------------------------------- :: Lists -------------------------------------------------- */ /* -------------------------------------------------- :: Tables -------------------------------------------------- */ /* -------------------------------------------------- :: Misc ---------------------------------------------------*/ .left { float: left; } /* Artfully Masterminded by ZURB */ /* -------------------------------------------------- :: Typography -------------------------------------------------- */ h2 { color: #181818; font-weight: bold; line-height: 1.25 } h2 a { font-weight: inherit; } h2 { font-size: 35px; font-size: 3.5rem; margin-bottom: 9px; } p { font-size: 13px; font-size: 1.3rem; line-height: 1.25; margin: 0 0 18px; } p img { margin: 0; } i { font-style: italic; line-height: inherit; } strong { font-weight: bold; line-height: inherit; } /* Blockquotes */ hr { height:8px; border: solid #ddd; border-width: 0px 0 0; clear: both; margin: 0 auto 60px; width: 110px; background-image: url('../images/curve_2x.png')} /** * Print styles. * * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com) */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ p a, p a:visited { color: #444 !important; text-decoration: underline; } p a[href]:after { content: " (" attr(href) ")"; } /* Don't show links for images, or javascript/internal links */ /* css-discuss.incutio.com/wiki/Printing_Tables */ img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2 { orphans: 3; widows: 3; } h2{ page-break-after: avoid; } } /* Artfully Masterminded by ZURB */ /* -------------------------------------------------- :: Grid This is the mobile-friendly, responsive grid that lets Foundation work much of its magic. -------------------------------------------------- */ .container { padding: 0 20px; margin: 0;} .content {margin: 180px 0 0 0;} .row { width: 100%; max-width: 880px; min-width: 727px; margin: 0 auto; } /* To fix the grid into a certain size, set max-width to width */ .row .row { min-width: 0; } .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; } .columns:first-child { margin-left: 0; } [class*="column"] + [class*="column"]:last-child { float: right; } .row .one { width: 4.3%; } .row .three { width: 21.679%; } .row .four { width: 30.37%; } .row .eight { width: 65.2%; } .row .twelve { width: 100%; } .row .centered { float: none; margin: 0 auto; } /* Source Ordering */ img { max-width: 100%; height: auto; } img { -ms-interpolation-mode: bicubic; } /* Nicolas Gallagher's micro clearfix */ .row:before, .row:after { content:""; display:table; } .row:after { clear: both; } .row { zoom: 1; } /* -------------------------------------------------- :: Block grids These are 2-up, 3-up, 4-up and 5-up ULs, suited for repeating blocks of content. Add 'mobile' to them to switch them just like the layout grid (one item per line) on phones For IE7/8 compatibility block-grid items need to be the same height. You can optionally uncomment the lines below to support arbitrary height, but know that IE7/8 do not support :nth-child. -------------------------------------------------- */ /* .block-grid.two-up>li:nth-child(2n+1) {clear: left;} */ /* .block-grid.three-up>li:nth-child(3n+1) {clear: left;} */ /* .block-grid.four-up>li:nth-child(4n+1) {clear: left;} */ /* .block-grid.five-up>li:nth-child(5n+1) {clear: left;} */ /* Artfully masterminded by ZURB */ /* -------------------------------------------------- Table of Contents ----------------------------------------------------- :: Buttons :: Alerts :: Labels :: Tabs :: Pagination :: Breadcrumbs :: Lists :: Panels :: Nav :: Video :: Microformats */ /* -------------------------------------------------- Buttons -------------------------------------------------- */ /* Don't use native buttons on iOS */ /* Hide inner focus effect in Firefox */ /* Sizes ---------- */ /* Nice Sizes ---------- */ /* Colors ---------- */ /* Nice Colors ---------- */ /* Hovers ---------- */ /* Hovers ---------- */ /* Disabled ---------- */ /* Correct FF button padding */ /* -------------------------------------------------- Alerts -------------------------------------------------- */ /* -------------------------------------------------- Labels -------------------------------------------------- */ /* Colors ---------- */ /* -------------------------------------------------- Tabs -------------------------------------------------- */ /* -------------------------------------------------- Pagination -------------------------------------------------- */ /* -------------------------------------------------- Breadcrumbs -------------------------------------------------- */ /* -------------------------------------------------- Lists -------------------------------------------------- */ /* -------------------------------------------------- Panels -------------------------------------------------- */ div.panel { padding: 0 20px 0 20px; } /* -------------------------------------------------- Nav Bar with Dropdowns -------------------------------------------------- */ /* -------------------------------------------------- Sub Navs http://www.zurb.com/article/292/how-to-create-simple-and-effective-sub-na -------------------------------------------------- */ /* -------------------------------------------------- Video Mad props to http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ -------------------------------------------------- */ /* -------------------------------------------------- Microformats -------------------------------------------------- */ /* hCard */ /* -------------------------------------------------- Tooltips -------------------------------------------------- */ /* Artfully masterminded by ZURB Make sure to include app.js / foundation.js if you are going to use inline label inputs */ /* ----------------------------------------- Standard Forms ----------------------------------------- */ /* Text input and textarea font and padding */ /* Text input and textarea, disabled */ /* Inlined Label Style */ /* Text input and textarea sizes */ /* Fieldsets */ /* Inlined Radio & Checkbox */ /* Errors */ /* ----------------------------------------- Nicer Forms ----------------------------------------- */ /* Text input and textarea, disabled */ /* ----------------------------------------- Custom Forms ----------------------------------------- */ /* Custom input, disabled */ /* ----------------------------------------- Nicer Custom Forms ----------------------------------------- */ /* CSS for jQuery Orbit Plugin 1.4.0 * Maintained for Foundation. foundation.zurb.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php /* CONTAINER ================================================== */ /* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */ /* TIMER ================================================== */ /* CAPTIONS ================================================== */ /* DIRECTIONAL NAV ================================================== */ /* BULLET NAV ================================================== */ /* FLUID LAYOUT ================================================== */ /* CSS for jQuery Reveal Plugin * Maintained for Foundation. foundation.zurb.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php /* -------------------------------------------------- Reveal Modals -------------------------------------------------- */ /* Mobile */ @media handheld, only screen and (max-width: 767px) { #header {height: 90px; position: relative;} .logo { position: absolute; top: 22px; left: 50%; width: 35px; height: 40px; z-index: 20; margin: 0 0 0 -12px; background: url(../images/12th-logo_2x.png) 50% 50% no-repeat; -webkit-device-pixel-ratio: 2; background-size: 35px 40px;} .container {} .content {margin-top: 30px;} .intro { font-size: 14px; line-height: 20px; padding: 20px 0 50px 0;} .NEVERtitle {color: #777; font: 16px/24px "Gotham", Helvetica, Arial, sans-serif; font-weight: 400; text-align: center; padding: 0 0 40px 0; margin: 0; letter-spacing: 7px;} .facebook a {-webkit-device-pixel-ratio: 2; background: #d9d9d9 url('../images/connect/facebook_2x.png') 50% 50% no-repeat; background-size: 40px 40px;} .twitter a {-webkit-device-pixel-ratio: 2; background: #d9d9d9 url('../images/connect/twitter_2x.png') 50% 50% no-repeat; background-size: 40px 40px;} .mail a {-webkit-device-pixel-ratio: 2; background: #d9d9d9 url('../images/connect/mail_2x.png') 50% 50% no-repeat; background-size: 40px 40px;} .instagram a {-webkit-device-pixel-ratio: 2; background: #d9d9d9 url('../images/connect/instagram_2x.png') 50% 50% no-repeat; background-size: 40px 40px;} } /* NOTES Close button entity is × Example markup

Awesome. I have it.

Your couch. I it's mine.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam.

×
*/ /* -------------------------------------------------- :: Typography -------------------------------------------------- */ @media handheld, only screen and (max-width: 767px) { h2 { font-size: 28px; font-size: 2.8rem; line-height: 1.3; } body, p { font-size: 15px; font-size: 1.5rem; line-height: 1.4; } } /* -------------------------------------------------- :: Grid -------------------------------------------------- */ /* Mobile */ @media only screen and (max-width: 767px) { body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .container { min-width: 0; margin-left: 0; margin-right: 0; } .row { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; } .row .row .columns { padding: 0; } .columns { width: auto !important; float: none; margin-left: 0; margin-right: 0; } .columns:last-child { margin-right: 0; float: none; } [class*="column"] + [class*="column"]:last-child { float: none; } [class*="column"]:before, [class*="column"]:after { content:""; display:table; } [class*="column"]:after { clear: both; } .centered { margin-left: 0 !important; } /* Mobile 4-column Grid */ .row .phone-one:first-child { margin-left: 0; } .row .phone-one:last-child { float: right; } .row .phone-one { margin-left: 4.4%; float: left; min-height: 1px; position: relative; padding: 0; } .row .phone-one { width: 21.68% !important; } } /* -------------------------------------------------- :: Block Grids -------------------------------------------------- */ /* -------------------------------------------------- :: Mobile Visibility Affordances ---------------------------------------------------*/ /* Modernizr-enabled tablet targeting */ /* Specific overrides for elements that require something other than display: block */ /* -------------------------------------------------- :: Forms ---------------------------------------------------*/ /* -------------------------------------------------- :: UI ---------------------------------------------------*/ /* Buttons */ /* Tabs */ /* Nav Bar */ /* Tooltips */ /* Video */ /* === app.css === */ /* Foundation v2.2 http://foundation.zurb.com */ /* Artfully masterminded by ZURB */ /* -------------------------------------------------- Table of Contents ----------------------------------------------------- :: Shared Styles :: Page Name 1 :: Page Name 2 */ /* ----------------------------------------- Shared Styles ----------------------------------------- */ /* ----------------------------------------- Flick Through ----------------------------------------- */ #homenav_container{min-width:100%; } .nav_logo{ width:100%;} #flick_logo{ position: absolute; z-index: 199; } /* ----------------------------------------- Page Name 2 ----------------------------------------- */ /* ----------------------------------------- Gallery thumb hover + custom SVG icons (overrides foundation.css) ----------------------------------------- */ .C-des, .C-cre, .C-dev { position: relative; background-image: none !important; background-color: #ececec; transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; cursor: pointer; } .C-des::before, .C-cre::before, .C-dev::before { content: ""; position: absolute; inset: 25%; background-color: #2c2c2c; -webkit-mask-image: var(--icon); mask-image: var(--icon); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: background-color 0.25s ease; } .C-des { --icon: url('../images/icon-svititka.svg'); } .C-cre { --icon: url('../images/icon-stolky.svg'); } .C-dev { --icon: url('../images/icon-sosky.svg'); } .C-des:hover, .C-cre:hover, .C-dev:hover { background-color: #2c2c2c; transform: scale(1.06); box-shadow: 0 8px 22px rgba(0,0,0,0.18); } .C-des:hover::before, .C-cre:hover::before, .C-dev:hover::before { background-color: #fff; } .C-title { transition: color 0.25s ease; } .four.columns:has(a:hover) .C-title { color: #2c2c2c; } /* ----------------------------------------- Sticky shrinking header ----------------------------------------- */ #header { transition: height 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; } #header .logo { transition: transform 0.25s ease, margin 0.25s ease; transform-origin: center top; } #header.shrunk { height: 64px; box-shadow: 0 2px 10px rgba(0,0,0,0.4); } #header.shrunk .logo { transform: scale(0.55); margin-top: 6px; }